未知选项：package.json.presets

Question

我在 webpack 中使用 babel-core ^5.4.7 和 babel-loader ^5.1.2。我也在使用 mobx ^3.3.1 和 mobx-react ^4.3.3 版本。现在我的问题是当我试图通过点击 npm run watch:webpack 来构建我的项目时，它会抛出 unknown option: package.json.presets

这里是我的 package.json

"devDependencies": {
   "babel-core": "^5.4.7",
   "babel-eslint": "^3.1.9",
   "babel-loader": "^5.1.2",
   "babel-plugin-react-transform": "^1.1.1",
   "babel-plugin-transform-decorators-legacy": "^1.3.4",
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1",
   "babel-preset-stage-1": "^6.24.1",
   ....
   "webpack": "^1.9.6",
   "webpack-dev-middleware": "^1.2.0",
   "webpack-hot-middleware": "^2.0.0"
 },
 "dependencies": {
   "mobx": "^3.3.1",
   "mobx-react": "^4.3.3",
   "prop-types": "^15.6.0",
   "react": "16.0.0",
   "react-dnd-html5-backend": "^2.5.4",
   "react-dom": "16.0.0",
   ....
 },
 "babel": {
   "presets": ["es2015", "react", "stage-1"],
   "plugins": ["transform-decorators-legacy"]
 }

这里是我的 webpack.config.dev.js

var path = require('path');
var webpack = require('webpack');
var src = path.join(__dirname, 'engine');
var dest = path.join(__dirname, 'assets/builder');

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: [
    src + '/index.jsx'
  ],
  output: {
    path: dest,
    filename: 'bundle.js',
    publicPath: '/assets/builder/'
  },
  resolve: {
    extensions: ['', '.json', '.js', '.jsx'],
    modulesDirectories: ['node_modules', 'bower_components', src]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'FREE': process.argv.indexOf('--free') !== -1 ? JSON.stringify("free"): JSON.stringify("pro")
      }
    }),
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loaders: ['babel?stage=0'], include: src},
      {test: /\.js?$/, loaders: ['babel?stage=0'], include: src},
      {test: /\.less$/, loader: 'style!css!less'},
      {test: /\.css$/, loader: 'style!css'},
      {test: /\.jpe?g$|\.gif$|\.png$/, loader: "url-loader"},

      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff"},
      {test: /\.ttf?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=font/ttf"},
      {test: /\.(eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"}
    ]
  }
};

这是我的 mobx 商店，带有装饰器 @observable

export default class ElementStore {

      @observable path = null,
      @observable visible = false,
      @observable list = sortElementsByName(elements),

      handle(handlerName, {path}) {
        switch (handlerName) {
          case HIDE_ELEMENTS:
            // do something..
            break;
          case SHOW_ELEMENTS:
            // do something..
            break;
        }
      }
  }

错误信息是

ERROR in ./engine/index.jsx
Module build failed: ReferenceError: [BABEL] /Users/iftekhersunny/Documents/code/quix/src/lib_quix/engine/index.jsx: Unknown option: /Users/iftekhersunny/Documents/code/quix/src/lib_quix/package.json.presets

为什么预设是未知选项？？？

Answer 1

presets 是 Babel 6.x 的配置标志，您正在尝试将它与 Babel 5 一起使用。Babel 5 超级旧，只需使用 Babel 6。

Answer 2

首先从 package.json 文件中移除 babel 选项，并在项目根目录下创建一个.babelrc 文件。

.babelrc 文件

{
  "presets": ["es2015", "react","stage-1"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

希望它有效