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命令解决了我的问题。我不知道为什么browserify中的package.json转换设置无法正常工作。我必须在命令中明确预设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"
  }
}

请注意，您必须安装babel-preset-es2015和babel-preset-react才能使其正常运行。

babelify不生效

1 个答案: