Как заставить использование tsify с модульной системой AMD приводить к пакетному файлу, а не к отдельным файлам или файлу, который использует not-found `define`? - PullRequest
Новая
       29

Как заставить использование tsify с модульной системой AMD приводить к пакетному файлу, а не к отдельным файлам или файлу, который использует not-found `define`?

0 голосов
/ 09 апреля 2020

Мне все равно, какую систему модулей я использую, если я могу использовать синтаксис импорта / экспорта ES6 TypeScript. Почему AMD помещает только main.ts в файл bundle. js, а UMD помещает в него все необходимые модули? Как я могу использовать AMD (что, как я понял, хорошо для браузеров), чтобы файл bundle. js содержал весь необходимый код? Я просто переключаюсь между AMD и UMD, и размер файла изменяется соответственно:

AMD:

1879 байт, записанных в js / bundle. js (0,06 секунды) в 14:57 : 28

UMD:

164682 байта, записанных в js / bundle. js (0,34 секунды) в 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.

Тестовое репо здесь . Он содержит:

  • часы. sh скрипт, который вызывает watchify с помощью пакета tsify
  • tsconfig. json
  • . json (помечается как зависимость пакет knockout. js, только для тестирования)
  • index. html (просто тестирует пакет. 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

Что я могу использовать вместо этого, чтобы этот комплект. js был фактически комплектом? В будущем я также хотел бы, чтобы он был минимизирован.

Я видел этот вопрос и ссылки в комментариях к этому вопросу, но в последнее время нет ответов (в последних 2 лет).

Спасибо.

1 Ответ

0 голосов
/ 10 апреля 2020

Я начал использовать 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.

...