如何在tsify和AMD模块系统中使用tsify来生成捆绑文件,而不是单独的文件或使用未找到的`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`?
问题描述
如果我能够使用ES6 TypeScript导入/导出语法,则我不在乎使用哪个模块系统.为什么AMD只将main.ts放入bundle.js文件中,而UMD却将所有必需的模块放入其中?如何使用AMD(据我了解,这对浏览器非常有用),以便bundle.js文件包含所有需要的代码?我只是在AMD和UMD之间切换,文件大小也随之改变:
I do not care which module system I use if I am able to use the ES6 TypeScript import/export syntax. Why does AMD put just main.ts in the bundle.js file, while UMD puts all the needed modules in it? How can I use AMD (which I understood that is good for the browsers) so that the bundle.js file contains all the needed code? I just change between AMD and UMD and the file size changes accordingly:
AMD:
在14:57:28将1879个字节写入js/bundle.js(0.06秒)
1879 bytes written to js/bundle.js (0.06 seconds) at 14:57:28
UMD:
在14:58:10将164682字节写入js/bundle.js(0.34秒)
164682 bytes written to js/bundle.js (0.34 seconds) at 14:58:10
如果我使用UMD,则会在浏览器控制台中收到一个相关的错误:
If I use UMD, I get a single relevant error in the browser console:
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
的内容:单行代码:
The contents of _prelude.js
as received by the browser: a single line of code:
(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.
So I cannot even use UMD.
测试仓库位于此处.它包含:
The test repo is here. It contains:
- 使用tsify调用watchify的watch.sh脚本
- tsconfig.json
- package.json(将标记为kickout.js包的依赖项,仅用于测试)
- index.html(仅测试bundle.js) 包含main.ts文件的
- ts目录,该文件输出到js目录
- the watch.sh script which calls watchify with tsify
- tsconfig.json
- package.json (marking as dependency the knockout.js package, just for testing)
- index.html (simply tests the bundle.js)
- ts directory containing the main.ts file, which outputs to js directory
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软件包:
Please remember that before running ./watch.sh
you must install some npm packages:
npm i -g watchify tsify typescript
我可以改用什么,以便bundle.js实际上是一个包?将来我也希望将其缩小.
What can I use instead so that bundle.js is actually a bundle? In future I would also like it to be minified.
我已经看到了这个问题,以及该问题的注释链接,但没有最新答案(在过去的2年中.)
I have seen this question, and the links in the comments in that question, but there are no recent answers (in the last 2 years).
谢谢.
推荐答案
我开始在watch.sh
文件中使用UMD,除了一些不相关的错误外,其他所有功能都可以正常工作.
I started using UMD in the watch.sh
file and everything works except some unrelated errors.
watch.sh
文件现在是这样的:
watchify --debug ts/main.ts -p [ tsify -p tsconfig.json -m umd ] -o js/bundle.js -v
bundle.js
文件正确很大,浏览器没有抱怨缺少define
函数.
The bundle.js
file is correctly big and the browser does not complain about the missing define
function.
这篇关于如何在tsify和AMD模块系统中使用tsify来生成捆绑文件,而不是单独的文件或使用未找到的`define`的文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!