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

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

gulp.task（“build”，function（））{
return gulp.src（sourceFiles）
.pipe（sourcemaps.init（））
.pipe（concat（“lib.js”））
.pipe（sourcemaps.write（））
.管道（大口目的地（“dist/”））；
});

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

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

在

src/MyModule.js

中：

MyLib.MyModule=（函数（）{
var模块={}；
//代码在这里。。。
返回模块；
})();

我想将这些脚本迁移到ES2015样式的模块，但我仍然希望我的版本包含一个脚本（这里是

lib.js

）。然后，我的库的使用者将使用AMD实现（例如require.js）加载我的模块

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

编辑：

---

我不需要像当前那样嵌套模块（

Foo.Bar.Baz

）。但我确实需要我的模块与流兼容。

正如@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可以生成各种风格的源代码图（这里我使用

源代码图

，这是最好的质量，但需要更多的时间来生成）。如果你想对你的代码做额外的转换，你只需要以通常的方式使用GulpSourceMaps插件，这样原始的源代码地图就会自动调整。您需要在Webpack传递后使用

loadMaps

选项初始化gulp sourcemaps。

正如@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可以生成各种风格的源代码图（这里我使用

源代码图

，这是最好的质量，但需要更多的时间来生成）。如果你想对你的代码做额外的转换，你只需要以通常的方式使用GulpSourceMaps插件，这样原始的源代码地图就会自动调整。您需要在通过Webpack后使用

loadMaps

选项初始化gulp sourcemaps。

这正是模块绑定器喜欢并旨在解决的问题。您可以用其中一个替换您的Gulp build，或者@JoeClay感谢您提供的链接。消费者如何加载和使用这些解决方案的“我的库”？取决于您如何配置它。不能说是Browserify，因为我从来没有真正使用过它，但可以设置Webpack来输出CommonJS、AMD、全局变量等。我建议输出为，这样可以使您的库与所有这些变量兼容。有关更多信息，请参阅本指南：这正是模块绑定器喜欢并旨在解决的问题。您可以用其中一个替换您的Gulp build，或者@JoeClay感谢您提供的链接。消费者如何加载和使用这些解决方案的“我的库”？取决于您如何配置它。不能说是Browserify，因为我从来没有真正使用过它，但可以设置Webpack来输出CommonJS、AMD、全局变量等。我建议输出为，这样可以使您的库与所有这些变量兼容。有关更多信息，请参阅本指南：