使用create-react-app构建来转译第三方模块 [英] Transpiling third-party modules with create-react-app build

问题描述

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

I'm developing a recently-ejected create-react-app application and need to use an outside module.

我做了npm install --save-dev starparam，并且正在导入这样的模块:import starparam from 'starparam';.

I did npm install --save-dev starparam and am importing the module like this: import starparam from 'starparam';.

当我使用单元测试(npm test)在NodeJS中运行代码时，一切都会按预期进行.

When I run my code in NodeJS with my unit-tests (npm test) everything works as expected.

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

But, when I run in the browser (using npm start) I get syntax errors.

这似乎是因为我正在使用的模块使用了ES6功能类似于箭头功能.

This seems to be because the module I'm using uses ES6 features like arrow functions.

我需要对Webpack进行哪些更改，以便此第三方模块包含在运输中?

What webpack changes do I need to make so this third-party module is included in the transpile?

推荐答案

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

I was able to accomplish my goal by:

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

• adding a new path in config/paths.js to the third-party module folder
• adding a new loader in the loaders array in the module object in config/webpack.config.dev.js
• a similar change in 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
  }
},

这篇关于使用create-react-app构建来转译第三方模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！