使用create-react-app构建时如何转译第三方模块

Question

我正在开发一个最近使用 create-react-app 创建的应用程序，需要使用外部 模块。

我已经执行了 npm install --save-dev starparam 命令，并像这样导入了该模块：import starparam from 'starparam';。

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

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

这似乎是因为我正在使用的模块 使用 ES6 特性，例如箭头函数。

我需要进行哪些 webpack 更改，以便将此第三方模块包含在转译中？

- Jonathan.Brink

---

通常在 webpack.config.js 中会排除 node_modules，你可以像这个 issue 中那样进行更改。https://github.com/babel/babel-loader/issues/171 - Xotic750

我不建议通过Babel运行node_modules。这并不总是安全的（可能会出现问题），而且会使构建速度显著变慢。 - Dan Abramov

我通过在我的webpack配置中添加一个加载器来实现了我的目标，但我不太清楚我的方法是否遵循了良好的实践。我在这里添加了一个回答，描述了我所做的事情：https://dev59.com/hqLia4cB1Zd3GeqPrvsI#44814538 - Jonathan.Brink

Answer 1

我通过以下操作实现了我的目标：

• 在config/paths.js中添加了一个新路径，指向第三方模块文件夹。
• 在config/webpack.config.dev.js的module对象的loaders数组中添加了一个新的加载器。
• 在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
  }
},

- Jonathan.Brink