Question

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

我做了npm install --save-dev starparam并导入了这样的模块：import starparam from 'starparam';。

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

但是，当我在浏览器中运行时（使用npm start），我会遇到语法错误。

这似乎是因为我使用的uses ES6 features模块就像箭头一样。

我需要做哪些webpack更改才能将第三方模块包含在transile中？

Answer 1

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

在config/paths.js中添加新路径到第三方模块文件夹
在loaders

中module对象的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
  }
},

Answer 2

您不需要包含那些用于转换的节点模块，而是需要将其排除。如果您还没有，可以在webpack-config中排除node-modules。

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

因为你正在使用create-react-app，所以它应该在webpack-config中有这个。同时尝试删除节点模块并重新安装。

rm -rf node_modules

然后npm install

希望，这有帮助。

使用create-react-app构建来传播第三方模块

2 个答案: