使用 create-react-app 构建转译第三方module

IT技术 reactjs module webpack create-react-app
2021-05-03 19:14:32

我正在开发一个最近弹出的create-react-app应用程序,需要使用外部module

我没有npm install --save-dev starparam和我导入这样的module:import starparam from 'starparam';

当我使用单元测试 ( npm test)在 NodeJS 中运行我的代码时,一切都按预期工作。

但是,当我在浏览器中运行(使用npm start)时,出现语法错误。

这似乎是因为我使用的module使用了 ES6 特性,如箭头函数。

我需要对 webpack 进行哪些更改才能将此第三方module包含在转译中?

2个回答

我能够通过以下方式实现我的目标:

  • config/paths.js第三方module文件夹中添加新路径
  • loadersmodule对象中数组中添加一个新的加载器config/webpack.config.dev.js
  • 类似的变化 config/webpack.config.prod.js

——

在中添加新路径config/paths.js

starparamSrc: resolveApp('node_modules/starparam'),

添加一个新的加载器config/webpack.config.dev.js

{
  test: /\.(js|jsx)$/,
  include: paths.starparamSrc,
  loader: 'babel',
  query: {
   cacheDirectory: true
  }
},

您不需要包含那些用于转译的节点module,而是需要排除它。如果您还没有,您可以在 webpack-config 中排除节点module。

module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    }

因为,您使用的是 create-react-app,它应该在 webpack-config 中有这个。同时尝试删除您的节点module并重新安装。

rm -rf node_modules 

接着 npm install

希望能帮助到你。