如何将 tsify 与 AMD 模块系统一起使用导致捆绑文件，而不是单独的文件或使用未找到的 `define` 的文件？

Question

如果我能够使用 ES6 TypeScript import/export 语法，我不关心我使用哪个模块系统。为什么 AMD 只把 main.ts 放在 bundle.js 文件中，而 UMD 把所有需要的模块都放在里面？我如何使用 AMD（我知道这对浏览器有好处）以便 bundle.js 文件包含所有需要的代码？我只是在 AMD 和 UMD 之间切换，文件大小也随之改变：

AMD：

1879 bytes written to js/bundle.js (0.06 seconds) at 14:57:28

UMD:

164682 bytes written to js/bundle.js (0.34 seconds) at 14:58:10

如果我使用 UMD，我会在浏览器控制台中收到一个相关错误：

Uncaught ReferenceError: define is not defined
    at Object.1 (_prelude.js:1)
    at o (_prelude.js:1)
    at r (_prelude.js:1)
    at _prelude.js:1
1 @ _prelude.js:1
o @ _prelude.js:1
r @ _prelude.js:1
(anonymous) @ _prelude.js:1

浏览器收到的_prelude.js内容：一行代码：

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()

所以我连UMD都用不了

测试回购是 here。它包含：

使用 tsify 调用 watchify 的 watch.sh 脚本
tsconfig.json
package.json（将 knockout.js 包标记为依赖项，仅用于测试）
index.html（简单测试bundle.js）
ts目录包含main.ts文件，输出到js目录

watch.sh

watchify --debug ts/main.ts -p [ tsify -p tsconfig.json ] -o js/bundle.js -v

tsconfig.json

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "js",
        "target": "ES6",
        "watch": true,
        "allowJs": true,
        "allowUmdGlobalAccess": true,
        "lib": ["ES6", "DOM"],
        "module": "UMD",
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "Node"
    },
    "include": [
        "ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

main.ts

import * as ko from "knockout";


alert("test: " + ko);

请记住，在运行 ./watch.sh 之前，您必须安装一些 npm 包：

npm i -g watchify tsify typescript

我可以用什么代替 bundle.js 实际上是一个包？以后我也想把它缩小。

我看过 this 问题，以及该问题评论中的链接，但没有最近的答案（过去 2 年）。

谢谢。

Answer 1

我开始在 watch.sh 文件中使用 UMD，除一些不相关的错误外一切正常。

现在的watch.sh文件是这样的：

watchify --debug ts/main.ts -p [ tsify -p tsconfig.json -m umd ] -o js/bundle.js -v

bundle.js 文件大小正确，浏览器不会抱怨缺少 define 功能。

如何将 tsify 与 AMD 模块系统一起使用导致捆绑文件，而不是单独的文件或使用未找到的 `define` 的文件？

How to make using tsify with the AMD module system result in a bundle file, not in separate files or a file that uses the not-found `define`?

javascript

bundle

typescript

watchify

tsify

watch.sh

tsconfig.json

main.ts