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加载程序，而不是 .js文件。

如果您想转发 <{strong> .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';

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

1 个答案: