将javascript文件捆绑到一个时出错

时间:2018-03-05 02:15:22

标签: reactjs npm browserify babel babelify

我正在尝试使用命令npm run build(我在内部使用browserify,babelify)将我的所有javascript文件捆绑到一个文件中。我收到以下错误。我错过了什么?

npm输出:

  

wpshout-react-quiz@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"
}

1 个答案:

答案 0 :(得分:0)

来自this issue

  

在标题为插件预设的部分下   http://babeljs.io/blog/2015/10/29/6.0.0

     

您可能需要npm install --save-dev babel-preset-react

     

然后将其用作Babelify选项的一部分   https://github.com/babel/babelify#options