0

如果我能够使用 ES6 TypeScript 导入/导出语法，我不在乎我使用哪个模块系统。为什么 AMD 只将 main.ts 放在 bundle.js 文件中，而 UMD 将所有需要的模块都放在其中？我如何使用 AMD（我知道这对浏览器有好处）以便 bundle.js 文件包含所有需要的代码？我只是在 AMD 和 UMD 之间进行更改，文件大小也会相应更改：

超微：

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

UMD：

164682 字节在 14:58:10 写入 js/bundle.js（0.34 秒）

如果我使用 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 调用 watchify 的 watch.sh 脚本
  • tsconfig.json
  • package.json （标记为依赖于 knockout.js 包，仅用于测试）
  • index.html（仅测试 bundle.js）
  • ts 目录包含 main.ts 文件，该文件输出到 js 目录

看.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 实际上是一个包？将来我也希望它被缩小。

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

谢谢你。

4

1 回答 1

0

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

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

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

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

于 2020-04-10T07:26:14.660 回答