Option inconnue: package.json.presets

Question

J'utilise babel-core^5.4.7 et babel-loader^5.1.2 avec webpack. J'utilise aussi mobx^3.3.1 et mobx-react^4.3.3 version. Maintenant, mon problème est quand je suis en train de construire mon projet en appuyant sur la montre de course NPM: webpack il lance l'option inconnue : package.json.presets

ici mon 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"] 
} 

et ici mes 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"} 
    ] 
    } 
}; 

Voici mon magasin de MOBX avec décorateur @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; 
     } 
     } 
    } 

Et le message d'erreur est

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 

Pourquoi les paramètres prédéfinis est l'option inconnue ???

Answer 1

presets est un indicateur de configuration pour 6.x Babel, et vous essayez de l'utiliser avec Babel 5. Babel 5 est super vieux, il suffit d'utiliser Babel 6.

Answer 2

Supprimez d'abord l'option babel du fichier package.json et créez un fichier .babelrc à la racine du projet.

.babelrc fichier

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

espérons que cela fonctionne