javascript - Using create react app, and having ES6 dependencies - Stack Overflow

admin管理员组

文章数量:1433447

I wrote an npm package blokus which use ES6 syntax.

I used create-react-app to start a project web-blokus, which depends on blokus.

I can run npm start with no errors, and view my web-blokus app in my browser, and it has all the functionality from using the blokus package.

The problem is that I get an UglifyJS error when running npm build.

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

It appears there is a known situation with UglifyJS not supporting ES6 dependencies (a few relevant issue threads here and here). But I read through these threads as well as a handful of others and I was left pretty confused as to what was planning to be updated and what people were doing as workarounds.

So I wanted to

1) confirm that create-react-app will not work out of the box (once you go to npm build) if your app has any ES6 dependencies

2) ask what people are doing to fix / bypass the issue (do I have to eject, and swap something in for UglifyJS?)

Since create-react-app and ES6 are now so popular, I assume I'm either misunderstanding the limitation, or a standard method of dealing with this limitation is discussed and known.

I wrote an npm package blokus which use ES6 syntax.

I used create-react-app to start a project web-blokus, which depends on blokus.

I can run npm start with no errors, and view my web-blokus app in my browser, and it has all the functionality from using the blokus package.

The problem is that I get an UglifyJS error when running npm build.

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

It appears there is a known situation with UglifyJS not supporting ES6 dependencies (a few relevant issue threads here and here). But I read through these threads as well as a handful of others and I was left pretty confused as to what was planning to be updated and what people were doing as workarounds.

So I wanted to

1) confirm that create-react-app will not work out of the box (once you go to npm build) if your app has any ES6 dependencies

2) ask what people are doing to fix / bypass the issue (do I have to eject, and swap something in for UglifyJS?)

Since create-react-app and ES6 are now so popular, I assume I'm either misunderstanding the limitation, or a standard method of dealing with this limitation is discussed and known.

• javascript
• reactjs
• uglifyjs
• create-react-app

Share Improve this question Follow asked Mar 22, 2017 at 3:07 tscizzletscizzle 12.3k1616 gold badges5959 silver badges9898 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can't use ES6 code with create-react-app, or most build systems.

npm packages shouldn't result in ES6 code because of existing tooling, and to a lesser extent, older node versions.

To set up your package, assuming the ES6 code is in the src directory:

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"
  }

Then do npm run build before publishing.

---

Create a .gitignore with 'lib' in it, and a .npmignore that's empty. The .npmignore needs to exist.

You can run your tests on the src directory (or lib, doesn't much matter).

本文标签： javascriptUsing create react appand having ES6 dependenciesStack Overflow