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

我开始学习ReactJs,我正在尝试使用这个"构建器"从头开始构建一个环境.

一切都运行良好,但我想使用.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,但无济于事.有任何想法吗？

只需替换此行:

test: /\.js$/,

有:

test: /\.jsx$/,

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

如果你想transpile 既 .js和.jsx,你可以将其设置为/\.jsx?$/,其中?在正则表达式表示匹配0或1次出现前面的字符:试验均为阳性.js和.jsx.

.testproperty表示运行loader密钥中指定的加载程序必须满足的条件.你可以阅读更多关于module.loader选择这里.

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

import Counter from './Counter.jsx';

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

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

这样,您可以导入没有扩展名的文件:

import Counter from './Counter';