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`?

问题

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:

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

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

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})()

So I cannot even use UMD.

The test repo is here. It contains:

• 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

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);

Please remember that before running ./watch.sh you must install some npm packages:

npm i -g watchify tsify typescript

What can I use instead so that bundle.js is actually a bundle? In future I would also like it to be minified.

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).

Thank you.

回答1:

I started using UMD in the watch.sh file and everything works except some unrelated errors.

The watch.sh file is like this now:

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

The bundle.js file is correctly big and the browser does not complain about the missing define function.

来源：https://stackoverflow.com/questions/61121230/how-to-make-using-tsify-with-the-amd-module-system-result-in-a-bundle-file-not