javascript - babelify不生效

Question

我有以下 package.json 文件:

{
  "name": "dongio",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build:less": "less ./app/modules/*/*.less > ./public/stylesheets/style.css",
    "build:js": "browserify -t babelify app/routes/*.js > public/javascripts/bundle.js",
    "start": "npm run build:less | npm run build:js | node server.js"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babelify": "^7.2.0",
    "body-parser": "~1.13.2",
    "browserify": "^12.0.1",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "^4.13.3",
    "express-handlebars": "^2.0.1",
    "flux": "^2.1.1",
    "history": "^1.13.1",
    "less-middleware": "1.0.x",
    "morgan": "^1.6.1",
    "react-router": "^1.0.0",
    "serve-favicon": "^2.3.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "babelify": "^7.2.0"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ]
    ]
  }
}

我不知道为什么 babelify 根本不起作用？我收到以下错误:

layout.js: Unexpected token (11:22)
   9 | 
  10 |     render() {
> 11 |         let navbar = (<nav>
     |                       ^
  12 |                     <div>
  13 |                         <ul>
  14 |                             <li><Link to='login'>Login</Link></li>

知道为什么会发生这种情况吗？我也把它放在 devDependency 下，全局安装它，没有帮助。

Answer 1

好吧，最后我的问题通过更改 build:js 命令解决了。我不知道为什么 package.json 中的 browserify 转换设置不起作用。我必须在命令中显式预设 browserify，如下所示:

{
  "name": "dongio",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build:less": "less ./app/modules/*/*.less > ./public/stylesheets/style.css",
    "build:js": "browserify -t [ babelify --presets [ es2015 react ] ] app/routes/*.js* > public/javascripts/bundle.js",
    "start": "npm run build:js | node server.js"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "body-parser": "~1.13.2",
    "browserify": "^12.0.1",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "^4.13.3",
    "express-handlebars": "^2.0.1",
    "flux": "^2.1.1",
    "history": "^1.13.1",
    "less-middleware": "1.0.x",
    "morgan": "^1.6.1",
    "react": "^0.14.3",
    "react-router": "^1.0.0",
    "serve-favicon": "^2.3.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "babelify": "^7.2.0"
  }
}

请注意，您必须 npm install babel-preset-es2015 和 babel-preset-react 才能完成此操作。