Gulp,WebpackStream,Babel和es2015问题

时间:2018-09-03 20:40:22

标签: javascript webpack ecmascript-6 gulp babel

我正在尝试编译js以使其与ie 11一起使用。将Gulp与webpack steram和babel一起使用。但这并不能改变js中的任何内容。

我在gulp中使用此任务,但插件似乎无法正常工作。 js中仍存在ES6模板字符串。我究竟做错了什么?谢谢。

尝试以其他方式加载插件,但仍然无法正常工作

 gulp.task('scripts', function(callback) {
let firstBuildReady = false;

function done(err, stats) {
    firstBuildReady = true;
    if (err) { // hard error, see https://webpack.github.io/docs/node.js-api.html#error-handling
        return;  // emit('error', err) in webpack-stream
    }
    gulplog[stats.hasErrors() ? 'error' : 'info'](stats.toString({
        colors: true
    }));
}

let options = {
    output: {
        publicPath: '/js/',
        filename: isDevelopment ? '[name].js' : '[name]-[chunkhash:10].js'
    },
    watch:   isDevelopment,
    devtool: isDevelopment ? 'cheap-module-inline-source-map' : false,
    module:  {
        loaders: [{
            test: /\.js$/,
            //include: path.join(__dirname, "app/src/scripts/modules"),
            loader: 'babel-loader',
            query: {
               presets: ["babel-preset-env"],
               plugins: [
                   "transform-es2015-template-literals"
               ]
            }
        }],
        rules: [{
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: '$'
            }]
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

if (!isDevelopment) {
    options.plugins.push(new AssetsPlugin({
        filename: 'scripts.json',
        path:     __dirname + '/app/manifest',
        processOutput(assets) {
            for (let key in assets) {
                assets[key + '.js'] = assets[key].js.slice(options.output.publicPath.length);
                delete assets[key];
            }
            return JSON.stringify(assets);
        }
    }));
}

return gulp.src(jsSRC)
    .pipe(plumber({
        errorHandler: notify.onError(err => ({
            title:   'Scripts',
            message: err.message
        }))
    }))
    .pipe(named(function(file){
        return 'app'
    }))
    .pipe(webpackStream(options, null, done))
    .pipe(gulpIf(!isDevelopment, uglify()))
    .pipe(gulp.dest(jsDIST))
    .on('data', function() {
        if (firstBuildReady) {
            callback();
        }
    });

});

0 个答案:

没有答案