构建闭包编译器/打字稿前端工作流程的问题答案

【问题标题】：Problems building a closure-compiler/typescript front end workflow构建闭包编译器/打字稿前端工作流程的问题
【发布时间】：2016-07-29 10:08:08
【问题描述】：

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

最终目标如下：

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

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

当我的项目完全包含在我的源代码树中时，这一切都可以完美运行（即我没有npm installed 任何模块。这是工作 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

import Foo from "bar"

那我该怎么办：

当我需要来自外部库（不带 ./）时，让闭包编译器查看 node_modules？
是否允许 browserify 在 npm 中使用这些 es6 模块？

【问题讨论】：

我正在努力支持闭包编译器，以便能够查找 node_modules 依赖项。不过，这还不是一个选择。
您应该能够定义 es6 模块根目录，以便 Closure Compiler 可以找到该模块。
@John 我该怎么做呢？从文档看来，“路径必须是绝对的或相对的”，所以在我看来，闭包并不能找到名为 "foo" 的模块，而是必须将其导入为 "./foo"
@ChadKillingsworth 这绝对是一个杀手级功能！是否有包含正在进行的工作的公共分叉？我很乐意提供帮助。
我相信约翰指的是--js_module_root标志。

标签： typescript npm gulp browserify google-closure-compiler

【解决方案1】：

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

【讨论】：