0

我想构建一个快速的 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）

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

谢谢

4

2 回答 2

-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"
  }
  /// ... 
  }
于 2016-01-20T13:02:20.423 回答
-2

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

于 2016-06-05T18:07:05.430 回答