使用babel編譯.jsx文件而不是.js

我開始學習ReactJs，我試圖使用this "builder"從零開始構建環境。使用babel編譯.jsx文件而不是.js

一切都運行得很好，但我想和.jsx文件，而不是.js工作（文本編輯器螺絲了，否則，和IR使用未編譯腳本擴展名不同的感覺更好）

然而，我沒有設法編譯這樣的.jsx文件，它只適用於.js文件。

這是.babelrc配置文件：

{ 
    "presets":["es2015","react"] 
}

而且我webpack.config.js：

var path = require('path'); 

var config = { 
    context: path.join(__dirname,'src'), 
    entry:[ 
     './main.js' 
    ], 
    output:{ 
     path :path.join(__dirname,'www'), 
     filename:'bundle.js' 
    }, 
    module:{ 
     loaders:[ 
      { 
       test: /\.js$/, 
       exclude:/node_modules/, 
       loaders:['babel'] 
      } 
     ], 
    }, 
    resolveLoader:{ 
     root: [ 
      path.join(__dirname,'node_modules') 
     ] 
    }, 
    resolve:{ 
     root:[ 
      path.join(__dirname,'node_modules') 
     ] 
    } 
}; 

module.exports = config;

我想簡單地改變的WebPack配置文件的擴展名從js到jsx，但無濟於事。任何想法？

來源

2017-01-23 Sebastianb

只需更換這行：

test: /\.js$/,

有：

test: /\.jsx$/,

它將運行在.jsx文件，而不是.js文件巴貝爾裝載機。

如果你想transpile 都.js和.jsx，你可以將其設置爲/\.jsx?$/，其中?在正則表達式表示匹配0或1次出現前面的字符：試驗均爲陽性.js和.jsx。

.test屬性表示運行loader鍵中指定的加載程序必須滿足的條件。您可以閱讀有關module.loader選件here的更多信息。

此外，導入模塊的時候，你應該添加.jsx擴展，像這樣：

import Counter from './Counter.jsx';

或者設置的WebPack的resolve.extensions配置添加.jsx擴展（默認情況下，它僅查找.js文件）。就像這樣：

resolve: { 
    /* ... */ 
    extensions: ['', '.js', '.jsx'] 
}

這樣，您就可以導入你的文件不帶擴展名：

import Counter from './Counter';

來源

2017-01-23 20:49:02 mrlew

改變你指出的那樣，不過，當我啓動服務器時，它拋出一個錯誤行：'ERROR在./src/main.jsx中：無法解析'file'或'directory'。/ Counter'這兩個js文件（main和counter）都是.jsx文件。 – Sebastianb

@Sebastianb我編輯了一個新的信息。你可以再試一次嗎？ – mrlew

是的！那就是訣竅，謝謝！ – Sebastianb

使用babel編譯.jsx文件而不是.js

回答

相關問題