Systemjs-Builder -无法将类型记录正确地配置到包中。

Question

我想构建一个快速的nodejs脚本，将一个类型记录应用程序打包为SystemJS模块，非常类似于Angular2包的样子。

我尝试了不同的配置，但我似乎无法将手指放在上面，而且到目前为止还没有找到足够清晰的文档。

请注意，对于这个“测试”，我根本不使用Gulp或Jspm，暂时只使用systemjs-builder (也不打算使用jspm )。

以下是我的“项目”的样子：

-项目的根源

-模块

-- 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等等)。

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

谢谢

Answer 1

这里有一个例子：角型标骨架

构建任务如下所示：

  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"
  }
  /// ... 
  }

Answer 2

你为什么要捆绑打字本？捆绑是一种用于优化将源代码交付给浏览器的方法。浏览器不知道类型记录，它只知道javascript (除非您动态转换)。