需要使用 gulp 延迟加载 ES6 模块答案

【问题标题】：need to lazy load ES6 module with gulp需要使用 gulp 延迟加载 ES6 模块
【发布时间】：2015-09-08 19:56:56
【问题描述】：

gulpfile.js

'use strict';

require('./gulp/index');

index.js

global.gulp = require('gulp');
global.path = require('path');
global.plumber = require('gulp-plumber');

require('./config');

var bulk = require('bulk-require');
bulk(__dirname, ['./tasks/*']);

gulp.task('default', ['clean', 'js', 'jscontroller']);

config.js

global.config = {};
config.PROJECT_ROOT = path.join(__dirname, '..');
config.DIST = path.join(config.PROJECT_ROOT, 'public/dist');

config.clean = {
src: config.PROJECT_ROOT + '/public/dist/**/*'
};

config.js = {
src: [config.PROJECT_ROOT + '/app/assets/javascripts/modules/**/*.js'],
dest: config.DIST,
webpackOptions: require(config.PROJECT_ROOT + '/webpack.config.js')
};
config.jscontroller = {
src: [config.PROJECT_ROOT + '/app/assets/javascripts/controllers/**/*.js'],
dest: config.DIST,
webpackOptions: require(config.PROJECT_ROOT + '/webpack.config.js')
};

config.watch = {
js: {
task: 'js',
src: config.PROJECT_ROOT + '/app/assets/javascripts/**/*.js'
}
};

module.exports = config;

使用 gulp + webpack 进行浏览器化(+babel)

我想按需延迟加载“页面控制器”。但目前我得到了一个大规模编译的 main.js 文件。我正在尝试将文件分开。有没有办法做到这一点。我试图在这些模块中使用 ES6，所以我显然需要通过 babel 运行它们，但是用 webpack 将它们作为单独的文件加载的正确方法是什么？

【问题讨论】：

标签： javascript gulp ecmascript-6 webpack babeljs

【解决方案1】：

通过在事件侦听器中计算我的导入并在此处使用以下特定语法，我能够使用 Webpack 进行延迟加载：

document.getElementById('loadCat').addEventListener('click', (e) => {
    require.ensure([], () => {
        var Cat = require('./cat').Cat;

        var myCat = new Cat('Bugsy');
        document.getElementById('content').innerHTML += `<br/>${myCat.meow()}`;
    });

});

根据我的经验，Webpack 足够聪明，不会在主包中包含来自 require.ensure 的任何内容，而是在单独的包中。

这对我来说很好，我在这里开源了这个例子：gulp-es6-webpack-example

【讨论】：