Question

我正在学习这些东西。我已经以此为例建立了一个项目： https://github.com/remojansen/ts-vscode-boilerplate

我的项目是TypeScript，并且输出必须在浏览器中运行（以及node.js，但现在是浏览器优先）。

具有此构建目标，该目标应该创建我想要的输出JS：

gulp.task("build", function() {

    var libraryName = "webgl";
    var mainTsFilePath = "test/test_gpu_matmul.ts";
    var outputFolder   = "dist/";
    var outputFileName = libraryName + ".js";

    var bundler = browserify({
        debug: true,
        standalone : libraryName
    });

    return bundler
        .add(mainTsFilePath)
        .bundle()
        .on('error', function (error) { console.error(error.toString()); })
        .pipe(source(outputFileName))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))        
        .pipe(uglify())
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(outputFolder));
});

但是gulp构建会产生以下结果：

D:\repos\webgl\test\test_gpu_matmul.ts:1
import { GpuBackend } from "../src/gpu_backend";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

在我看来，似乎没有将node.js模块格式转换为与浏览器兼容的格式。

我在线搜索，发现一个使用babelify的建议。 SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Wait what?

那东西是一场噩梦。我尝试升级到npm3，但仍然无法正常进行。请不要向我建议。

这是我的tsconfig：

{
    "include" : [
        "src",
        "test"
    ],
    "compileOnSave": true,
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "target": "es5",
        "noImplicitAny": true,
        "declaration": true,
        "sourceMap": true,
        "preserveConstEnums": true,
        "lib": [
            "es2015", "dom"
        ],
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "strictNullChecks": false,
        "noUnusedParameters": false,
        "pretty": true,
        "allowUnreachableCode": false,
        "experimentalDecorators": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

ParseError：“导入”和“导出”可能仅与“ sourceType：模块”一起出现

0 个答案: