使用 create react app，并具有 ES6 依赖项

Question

我写了一个使用 ES6 语法的 npm 包 blokus。

我用create-react-app启动了一个项目web-blokus，它依赖于blokus。

我可以运行 npm start 没有错误，并在我的浏览器中查看我的 web-blokus 应用程序，它具有使用 blokus 包的所有功能。

问题是运行ning npm build.

时出现 UglifyJS 错误

static/js/main.8afd34e2.js from UglifyJs
SyntaxError: Name expected [./~/blokus/blokus/blokus.js:3,0]

似乎存在 UglifyJS 不支持 ES6 依赖项的已知情况（一些相关问题线程 here and here）。但是我通读了这些线程以及其他一些线程，对于计划更新的内容以及人们正在做的解决方法，我感到非常困惑。

所以我想

1) 如果您的应用有任何 ES6 依赖项

，请确认 create-react-app 不会开箱即用（一旦您转到 npm build）

2) 询问人们正在做什么来修复/绕过这个问题（我是否必须弹出，并为 UglifyJS 交换一些东西？）

由于 create-react-app 和 ES6 现在如此流行，我想我要么误解了限制，要么讨论并知道了处理此限制的标准方法。

Answer 1

您不能将 ES6 代码与 create-react-app 或大多数构建系统一起使用。

由于现有工具，npm 包不应生成 ES6 代码，并且在较小程度上，较旧的节点版本。

要设置你的包，假设 ES6 代码在 src 目录中：

npm install --save-dev babel-core babel-cli babel-preset-latest

.babelrc

{
  "presets": ["latest"]
}

package.json

  "main": "./lib",
  "scripts": {
    "build": "babel src --out-dir lib"
  }

然后在发布前做npm run build。

创建一个包含 'lib' 的 .gitignore，以及一个空的 .npmignore。 .npmignore 需要存在。

您可以运行在 src 目录（或 lib，无关紧要）上进行测试。

Using create react app, and having ES6 dependencies