javascript - 需要用 gulp 延迟加载 ES6 模块

Question

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 进行 browserify(+babel)

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

Answer 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