Question

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

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

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

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

在src/MyModule.js：

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

  // code here...

  return module;
})();

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

有可能实现这样的目标吗？我该怎么做？

编辑：

我不需要我的模块保持嵌套状态（Foo.Bar.Baz）。但我确实需要我的模块与Flow兼容。

Answer 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 。

将旧库迁移到ES2015样式的模块

1 个答案: