构建 closure-compiler/typescript 前端工作流程时遇到问题

Question

我正在尝试使用 gulp、closure-compiler 和 typescript 以及从私人 sinopia 存储库托管的 npm 模块来构建有用的工作流程。

最终目标如下：

使用 browserify 和 typescript 进行开发，并将共享代码发布到私有 npm 存储库。
随后使用闭包编译器优化 Web 应用程序项目。

（闭包编译器不是可选的，UglifyJS 在文件大小和性能方面没有执行我想要的优化级别）

当我的项目完全包含在我的源代码树中时（即我没有 npm install编辑任何模块。这是工作的 gulpfile：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var size = require('gulp-size');
var server = require('gulp-live-server');
var typescript = require('gulp-typescript');
var closureCompiler = require('gulp-closure-compiler');

/** No minification */
gulp.task('compile-dev', function() {
    console.log("compile-dev at "+new Date())
    var b = browserify({baseDir: "src", debug: true})
        .add("src/main.ts")
        .plugin('tsify', { noImplicitAny: true, target: "es6"});
    b.bundle()
    .on('error', function(error) {
        console.error(error.toString());
    })
    .pipe(source("out.js"))
    .pipe(gulp.dest("www"))
})

/* minify with closure */
gulp.task('compile-closure', function () {
    gulp.src('src/**/*.ts')
    .pipe(typescript({target: "es6"}))
    .pipe(gulp.dest("build"))
    .pipe(closureCompiler({
        fileName: "out.js",
        compilerFlags: {
            language_in: "ES6",
            language_out: "ES5",
            compilation_level: "ADVANCED_OPTIMIZATIONS"
        }
    }))
    .pipe(gulp.dest("www"))
    .pipe(size({gzip: true, showFiles: true }))
});

现在我运行使用模块解决三个相互关联的问题：

发布 npm 包并使用 typescript 的 target: "es6" 编译顶级项目会导致 compile-dev 任务中的 browserify 因 ParseError: 'import' and 'export' may appear only with 'sourceType: module' 而阻塞。如果我用 typescript target: "es5" 编译模块，我们回来为 compile-dev 工作，所以实际上在这个意义上 - compile-dev 工作完美，假设我在任何地方都以 "es5" 为目标.
向下移动到 "es5"，导致闭包编译器因 Error: build/main.js:2: WARNING - dangerous use of the global this object var __extends = (this && this.__extends) || function (d, b) { 而窒息 - 闭包不喜欢使用 typescript 生成的 es5
如果我坚持使用 "es6" 作为 typescript 目标，browserify 不仅会在 compile-dev 上阻塞，而且闭包（也许可以理解）仍然找不到我的库因为如果我 import Foo from "bar".

那么我怎样才能：

当我从外部库（没有 ./）请求时，让闭包编译器查看 node_modules？
允许 browserify 在 npm 中使用这些 es6 模块？

Answer 1

这对于闭包编译器尚不可行，因为编译器不知道如何查找命名模块。唯一的选择是使用可以在编译之前消除命名模块引用的捆绑器。

构建 closure-compiler/typescript 前端工作流程时遇到问题

Problems building a closure-compiler/typescript front end workflow

typescript

npm

gulp

browserify

google-closure-compiler