reactjs - 使用 babel 编译 .jsx 文件而不是 .js

Question

我开始学习ReactJs，我尝试使用 this "builder" 从头开始​​构建一个环境.

一切都工作得很好，但我想使用 .jsx 文件而不是 .js (文本编辑器会搞砸，否则，我感觉使用更好未编译脚本的不同扩展名)

但是，我没有成功编译这样的 .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，但无济于事。有什么想法吗？

Answer 1

只需替换这一行:

test: /\.js$/,

与:

test: /\.jsx$/,

它将在 .jsx 上运行 babel loader文件，而不是 .js文件。

如果您想转译两者 .js和.jsx ，您可以将其设置为 /\.jsx?$/ ，其中?在正则表达式中表示匹配前面字符的 0 或 1 次出现: .js 均测试为正值和.jsx .

.test属性指示运行loader中指定的加载程序必须满足的条件。 key 。您可以阅读更多关于 module.loader选项 here .

此外，导入模块时，应添加 .jsx扩展名，如下所示:

import Counter from './Counter.jsx';

或者设置webpack的 resolve.extensions 配置添加.jsx扩展名(默认情况下，它仅查找 .js 文件)。像这样:

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

这样，您就可以导入不带扩展名的文件:

import Counter from './Counter';