将javascript文件捆绑到一个

Question

我试图使用命令npm run build (它在内部使用browserify、babelify )将所有javascript文件打包到一个文件中。我得到了以下错误。我遗漏了什么？

npm产出：

wpshout react@1.0.0 bundle-js C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz FacebookAlbums.js -o bundle.js

SyntaxError: C:/wamp64/www/wordpress/wp-content/plugins/wpshout-react-quiz/FacebookAlbums.js: Unexpected token (25:6)
  23 |
  24 |     return (
> 25 |       <div>
     |       ^
  26 |         <button type="button" onClick={() => this.setState({ isOpen: true })}>
  27 |           Open Lightbox
  28 |         </button>
    at Parser.pp$5.raise (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$3.parseExprAtom (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3750:12)
    at Parser.pp$3.parseExprSubscripts (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3474:19)
    at Parser.pp$3.parseExprOps (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3344:19)
    at Parser.pp$3.parseParenAndDistinguishExpression (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3828:26)
    at Parser.pp$3.parseExprAtom (C:\wamp64\www\wordpress\wp-content\plugins\wpshout-react-quiz\node_modules\babylon\lib\index.js:3709:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wpshout-react-quiz@1.0.0 bundle-js: `browserify FacebookAlbums.js -o bundle.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wpshout-react-quiz@1.0.0 bundle-js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AjitGoel\AppData\Roaming\npm-cache\_logs\2018-03-05T01_26_56_790Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wpshout-react-quiz@1.0.0 build: `npm run bundle-js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wpshout-react-quiz@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

package.json:

{
  "name": "wpshout-react-quiz",
  "version": "1.0.0",
  "description": "",
  "main": "FacebookAlbums.js",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babelify": "^8.0.0",
    "concat": "^1.0.3",
    "npm-run-all": "^4.1.2",
    "onchange": "^3.3.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-image-lightbox": "^4.5.0",
    "react-slick": "^0.19.0",
    "uglify": "^0.1.5",
    "watch": "^1.0.2"
  },
  "devDependencies": {},
  "scripts": {
    "bundle-js": "browserify FacebookAlbums.js -o bundle.js",
    "build": "npm run bundle-js"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  },
  "author": "",
  "license": "ISC"
}

Answer 1

来自本期

在标题为http://babeljs.io/blog/2015/10/29/6.0.0的插件预置一节中 你可能想要npm install --save-dev babel-preset-react 然后将其用作Babelify选项https://github.com/babel/babelify#options的一部分