将遗留库迁移到 ES2015 风格的模块答案

【问题标题】：Migrating legacy library to ES2015-style modules将遗留库迁移到 ES2015 风格的模块
【发布时间】：2017-02-06 10:40:35
【问题描述】：

我有一个打算在浏览器中工作的 javascript 库，我用以下类型的 gulpfile 打包：

gulp.task("build", function() {
  return gulp.src(sourceFiles)
    .pipe(sourcemaps.init())
    .pipe(concat("lib.js"))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("dist/"));
});

我想开始将此库迁移到 ES2015，使用 Babel。

目前，src/ 文件夹中的每个源文件都代表一个模块，并使用以下约定编写。

在src/MyModule.js:

MyLib.MyModule = (function () {
  var module = {};

  // code here...

  return module;
})();

我想将这些脚本迁移到 ES2015 样式的模块，但我仍然希望我的版本包含单个脚本（此处为 lib.js）。然后，我的库的使用者将使用 AMD 实现（例如 require.js）加载我的模块。

有可能实现这样的事情吗？我该怎么做？

编辑：

我不需要我的模块像现在一样保持嵌套 (Foo.Bar.Baz)。但我确实需要我的模块与 Flow 兼容。

【问题讨论】：

这正是 Webpack 和 Browserify 等模块捆绑器旨在解决的问题。你可以用其中一个替换你的 Gulp 构建，或者integrate one of them into your config。
@JoeClay 感谢您的链接。消费者将如何通过这些解决方案加载和使用我的库？
取决于你如何配置它。不能代表 Browserify，因为我从来没有真正使用过它，但是 Webpack 可以设置为输出 CommonJS、AMD、全局变量等。我建议输出为 UMD，这样可以让你的库兼容他们都是。有关更多信息，请参阅本指南：webpack.js.org/guides/author-libraries

标签： javascript gulp babeljs

【解决方案1】：

正如@JoeClay 所建议的，我最终使用 Webpack 打包了我的代码。我将其设置为以 UMD 格式输出，以获得更好的可移植性。这是我的 gulpfile.js 的摘要：

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');

var babel_loader = {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
        presets: babel_presets,
        plugins: babel_plugins
    }
};

var webpackConfig = {
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-app.js',
        library: 'MyApp',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [
            babel_loader
        ]
    },
    externals: externals,
    devtool: "source-map"
};

gulp.task('build', function () {
    return gulp.src("src/index.js")
        .pipe(webpackStream(webpackConfig, webpack))
        .pipe(sourcemaps.init({loadMaps: true}))
        // some additional transformations here (e.g. uglify)...
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/'));
});

源文件注释

您不需要列出所有源文件。 Webpack 通过从指定的入口点（这里只是“src/index.js”）开始递归扫描源来自行解决依赖关系。这种方法要求我调整我的遗留代码以使用 ES2015 样式的模块导入/导出。

源地图注意事项

Webpack 可以生成各种风格的源图（这里我使用source-map，这是最好的质量但需要更多时间来生成）。如果你想对你的代码做额外的转换，你只需要按照通常的方式使用 gulp-sourcemaps 插件，这样原始的源映射就会自动适应。您需要使用 loadMaps 选项在 Webpack 传递之后初始化 gulp-sourcemaps。

【讨论】：