如何使使用tsify与AMD模块系统的结果是一个捆绑文件，而不是单独的文件或一个文件使用未找到的“定义”？

Question

如果我能够使用ES6 TypeScript导入/导出语法，那么我并不关心使用哪个模块系统。为什么AMD只将main.ts放在bundle.js文件中，而UMD则将所有所需的模块放入其中？我如何使用AMD (我理解这对浏览器是好的)，以便bundle.js文件包含所有所需的代码？我只是在AMD和UMD之间进行更改，文件大小也相应地发生了变化：

AMD：

1879字节在14:57:28写入js/bundle.js (0.06秒)

UMD：

在14:58:10写入js/bundle.js (0.34秒)的164682字节

如果我使用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。

测试回购是这里。它包括：

• 用tsify调用watch.sh脚本
• tsconfig.json
• package.json (将knockout.js包标记为依赖项，仅用于测试)
• index.html (简单地测试bundle.js)
• 包含main.ts文件的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才是一个包呢？将来我也希望把它缩小。

我已经看到了这问题，以及这个问题的评论中的链接，但是没有最近的答案(在过去的两年中)。

谢谢。

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函数。