Systemjs-Builder - 无法正确配置 - 将 Typescript 捆绑到包中答案

【问题标题】：Systemjs-Builder - Cannot configure properly - Bundling Typescript into a packageSystemjs-Builder - 无法正确配置 - 将 Typescript 捆绑到包中
【发布时间】：2016-06-06 02:07:05
【问题描述】：

我想构建一个快速的 nodejs 脚本来将 Typescript 应用程序打包为 SystemJS 模块，很像 Angular2 包的样子。

我尝试了不同的配置，但我似乎无法确定它，并且到目前为止还没有找到足够清晰的文档。

请注意，对于这个“测试”，我根本没有使用 Gulp 或 Jspm，暂时只是 systemjs-builder（也不打算使用 jspm）

这是我的“项目”的样子：

---- 项目的根目录

-------- index.ts // export * from './modules/index' 甚至更多

-------- 模块

------------ index.ts // export * from './menu/index'

------------ 菜单

---------------- menu.component.ts // export class

---------------- menu.service.ts // export class

我想将它打包到一个文件中，我将在其中拥有多个 SystemRegister 模块，之后可以在应用程序中使用这些模块

我尝试了以下方法但没有成功：

var Builder = require('systemjs-builder');

// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('./modules');

builder.bundle('./modules/index.ts', {
    /* SystemJS Configuration Here */
    baseURL: './modules',
    transpiler: 'typescript',
    typescriptOptions: {
        "module": "system",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    defaultExtension: 'ts',
    packages: {
        'modules': {
            defaultExtension: 'ts'
        }
    }
}, 'infrastructure.js')
      .then(function() {
        console.log('Build complete');
      })
      .catch(function(err) {
        console.error(err);
      })

首先，defaultExtension 选项似乎根本不起作用所以当我做import {something} from 'filePath';（没有扩展名）时，它会尝试加载filePath，而不是filePath.ts；

其次，如果我尝试在导入中添加 .ts 扩展名（我不想这样做），它会抱怨代码无效（unexpected token @、unexpected token menuItem 等等）

任何人有一个很好的例子或一些解释这应该如何工作？

谢谢

【问题讨论】：

标签： javascript bundling-and-minification systemjs module-packaging

【解决方案1】：

这里有一个例子：angular typescript skeleton

构建任务如下所示：

  const path = require('path');
  const Builder = require('jspm').Builder;
  const builder = new Builder();
  const packageJson = require(path.join(config.projectDir, 'package.json'));

  return beginBuild()
    .then(buildSFX)
    .catch((err) => console.log('Build Failed', err));

  function beginBuild() {
    builder.reset();
    return builder.loadConfig(path.join(config.projectDir, packageJson.jspm.configFile))
  }

  function buildSFX() {
    const appName = packageJson.name;
    const distFileName = `${appName}.min.js`;
    const outFile = path.join(config.distDir, distFileName);
    const moduleName = 'app';
    const buildConfig = {
      format: 'global',
      minify: true,
      sourceMaps: true
    };
    return builder.buildStatic(moduleName, outFile, buildConfig);
  }

jspm conf 看起来像这样：

System.config({
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "tsconfig": "src/tsconfig.json"
  },
  paths: {
    "github:*": "vendor/jspm_packages/github/*",
    "npm:*": "vendor/jspm_packages/npm/*",
    "app": "src/index"
  }
  /// ... 
  }

【讨论】：

【解决方案2】：

为什么要捆绑打字稿？捆绑是一种用于优化向浏览器传递源代码的方法。浏览器不知道 typescript，它只知道 javascript（除非您进行动态转译）。

【讨论】：