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

IT技术 reactjs webpack babeljs
2021-05-24 09:52:17

我开始学习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，但无济于事。有任何想法吗？

1个回答

只需替换此行：

test: /\.js$/,

和：

test: /\.jsx$/,

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

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

.test属性表示运行loader键中指定的加载程序必须满足的条件。您可以在此处阅读有关module.loader选项的更多信息。

此外，在导入module时，您应该添加.jsx扩展名，如下所示：

import Counter from './Counter.jsx';

或者设置 webpack 的resolve.extensions配置来添加.jsx扩展名（默认情况下，它只查找 .js 文件）。像这样：

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

这样，您可以导入没有扩展名的文件：

import Counter from './Counter';
其它你可能感兴趣的问题
上一篇使用 axios 删除请求 - React 下一篇如何撤消 Redux 异步操作？（状态多退几步）