2015-11-05 59 views
4

在webpack配置文件中可以使用ES6(尤其是import - 而不是require)嗎?我不能在webpack配置文件中使用ES6

我有例如

import webpack from 'webpack'; 

,但我收到以下錯誤

(function (exports, require, module, __filename, __dirname) 
{ import webpack from'webpack'; 

SyntaxError: Unexpected reserved word import 

如下因素this thread我命名的配置 'webpack.config.babel.js',我有通天(6.0.15),babel-核心(6.1.2)安裝爲dev deps,但沒有任何效果。試用WinXP。

感謝您的任何幫助。

+0

如果通過通天編譯成節點運行它,它可能會工作。即'babel webpack.config.es6 |節點「,但沒有把它放到webpack中。 – 4m1r

回答

1

你可以用杯和巴貝爾/註冊這樣的:

var gulp = require('gulp'); 
var webpack = require('webpack'); 
var gutil = require('gutil'); 
var babel = require('babel/register'); 
var config = require(path.join('../..', 'webpack.config.es6.js')); 

gulp.task('webpack-es6-test', function(done){ 
    webpack(config).run(onBuild(done)); 
}); 

function onBuild(done) { 
    return function(err, stats) { 
     if (err) { 
      gutil.log('Error', err); 
      if (done) { 
       done(); 
      } 
     } else { 
      Object.keys(stats.compilation.assets).forEach(function(key) { 
       gutil.log('Webpack: output ', gutil.colors.green(key)); 
      }); 
      gutil.log('Webpack: ', gutil.colors.blue('finished ', stats.compilation.name)); 
      if (done) { 
       done(); 
      } 
     } 
    } 
} 

...和你的WebPack配置可以有任何ES6。經過測試併爲我工作。

1

Rabet,

你有鏈接到你的代碼的回購?如果您可以鏈接我們,可能對調試非常有幫助。聽起來你可能會錯過babel-loader包。

我已經寫了關於獲取在ES6中配置webpack(反應)的教程。

下面是一些可能與您有關的摘錄。

import path from 'path' 
export default { 
    entry:['./js/app.js', 
    ], 

    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, 'build'), 
    publicPath: 'http://localhost:8080/', 
    }, 

    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot', 'babel'], 
    }], 
    }, 

} 

和我的package.json文件

{ 
「name」: 「Todo_tutorial」, 
「version」: 「1.0.0」, 
「description」: 「」, 
「main」: 「index.js」, 
「scripts」: { 
「test」: 「echo \」Error: no test specified\」 && exit 1", 
「build」: 「webpack --colors --progress」, 
「start」: 「webpack-dev-server --hot --inline --color --progress 」 
}, 
「author」: 「」, 
「license」: 「ISC」, 
「dependencies」: { 
「react」: 「^0.14.0」 
}, 
「devDependencies」: { 
「babel-core」: 「^5.8.25」, 
「babel-loader」: 「^5.3.2」, 
「flux」: 「^2.1.1」, 
「webpack」: 「^1.12.2」, 
「webpack-dev-server」: 「^1.12.0」 
} 
} 

來源:https://medium.com/@ColeMurray/react-flux-in-es6-pt-1-2-e2a7b4aa074e

相關問題