Question

我正在使用 babel-core ^ 5.4.7 和 babel-loader ^ 5.1.2 与webpack。我也使用 mobx ^ 3.3.1 和mobx-react ^ 4.3.3版本。现在我的问题是当我试图通过点击npm run watch来构建我的项目时：webpack它会抛出未知选项：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"
  ]
}

希望它有效

未知选项：package.json.presets

2 个答案: