Question

我有一个带有typescript的angular 2应用程序，可以生成js文件。

最近我安装了npm和gulp以及编写的任务来捆绑所有js文件到现在如何加载该文件？

我的index.html页面早些时候： //哪个适用于main是引导appComponent的组件

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/V1/components/main')
              .then(null, console.error.bind(console));
    </script>

我的Gulp任务：

var config = {
    src: ['app/**/*.js'],
    dest: ['Scripts/']
};

gulp.task('bundle', function () {

    console.log('testing');
    return gulp.src(config.src)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('app/'));
})

当我运行这个gulp任务时，它会生成all.min.js，但现在如何使用它，即如何在System.import中删除main.js并加载

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            },
            map: {
                immutable: 'app/all.min.js'
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/all.min')
              .then(null, console.error.bind(console));
    </script>

我尝试过这种方式，将错误抛出

错误：模块http://localhost:55308/app/all.min.js中的多个匿名System.register调用。如果加载bundle，请确保所有System.register调用都已命名。

Answer 1

我认为有一个更好的解决方案可以捆绑文件以供system.js使用。有一个名为systemjs-builder的便捷图书馆。你可以轻松地使用它。

首先，您需要将system.js脚本解压缩到单独的文件中。然后，您可以使用此任务生成连接的js。

gulp.task('system', () => {
    var builder = new systemBuilder();

    return builder.loadConfig('./system.config.js') // Name of your system js file
        .then(() => builder.buildStatic('app',  'total.js'))

}）;

现在你有连接文件以及运行它所需的system.js配置，此时每件事都应该正常工作。但是，您需要使用单独的库来uglify js。 gulp-uglify应该可以正常工作。

以下是一个示例任务：

gulp.task('build', ['system'], () => {
    return gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'total.js'
    ])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./'))
    });

现在，如果您运行gulp build并将生成的main.js包含到index.html中（删除所有其他脚本），那么一切都应该有效。

如何使用Gulp在角度2中加载系统导入中的捆绑文件：错误：模块中的多个匿名System.register调用

1 个答案: