首頁猿問編譯TypeScript時如何處理...

編譯TypeScript時如何處理外部模塊？

JavaScript

狐的傳說 2021-10-21 13:29:04

我對 TypeScript 很陌生，我嘗試了很多東西，但在編譯后卻被外部模塊卡住了。我從 Visual Studio Code 中的簡單 TypeScript 項目開始，將目標(biāo)設(shè)置為 ES2015，并將模塊設(shè)置為 es2015（因為我想盡可能多地使用本機(jī)內(nèi)容），我想嘗試使用 npm 安裝的強(qiáng)類型事件 (STE)。通過將模塊分辨率更改為node并baseUrl在中設(shè)置tsconfig.json，TypeScript 在使用非相對導(dǎo)入的 STE 時沒有問題：import { SimpleEventDispatcher } from "ste-simple-events";但是，當(dāng)我編譯 TypeScript 時，生成的 JavaScript 文件具有完全相同的導(dǎo)入語句，并且在加載包含此模塊的 html 時，出現(xiàn)無法找到模塊的錯誤。我不知道如何解決這個問題。TypeScript 應(yīng)該以某種方式將 import 語句更改為 STE 的確切位置嗎？也許吧，但 TypeScript 團(tuán)隊表示 TypeScript 編譯永遠(yuǎn)不會改變 import 語句中的代碼?；蛘呶覒?yīng)該以某種方式編譯外部模塊，以便它們包含在輸出中？或者應(yīng)該在瀏覽器中實現(xiàn)的 ES2015 標(biāo)準(zhǔn)中的默認(rèn)模塊分辨率來完成這項工作 - 我不知道它是如何工作的，以及應(yīng)該如何在 JavaScript 中導(dǎo)入外部 ES2015 模塊？任何幫助或朝正確方向的推動將不勝感激。

查看完整描述

1 回答

BIG陽

TA貢獻(xiàn)1859條經(jīng)驗獲得超6個贊

對于任何對此感到頭疼的 TypeScript 初學(xué)者來說，答案就是 JavaScript 打包器。

由于我使用的是 ES6，因此我選擇了 RollupJs 捆綁器結(jié)合以下插件（按此順序使用它們）：

rollup-plugin-resolve - 需要解析 node_modules
rollup-plugin-commonjs - 需要將 node_modules 中的 CommonJS 模塊轉(zhuǎn)譯為 ES6
rollup-plugin-typescript2 - 可選，您可以在過程中使用它，也可以在運行匯總之前手動使用 tsc - 只需確保使用版本 2（不再維護(hù)第一個版本）
rollup-plugin-terser - 壓縮器和混淆器

您可以使用 npm 安裝所有這些： npm install rollup rollup-plugin-resolve rollup-plugin-commonjs rollup-plugin-typescript2 rollup-plugin-terser

添加rollup.config.js到您的項目的根目錄，我的看起來像這樣：

import typescript from "rollup-plugin-typescript2"

import commonjs from "rollup-plugin-commonjs";

import resolve from "rollup-plugin-node-resolve";

import { terser } from "rollup-plugin-terser";

import pkg from "./package.json"

export default {

input: "./wwwroot/js/svgts.js",

output: [

{

file: pkg.module,

format: "esm",

},

],

external: [

...Object.keys(pkg.dependencies || {}),

...Object.keys(pkg.peerDependencies || {}),

], plugins: [

resolve({

mainFields: ["module"], // Default: ["module", "main"]

}),

commonjs({

include: "node_modules/**"

}),

typescript({

typescript: require("typescript"),

tsconfig: "./tsconfig.json"

}),

(process.env.NODE_ENV === "production" && terser({

mangle: { reserved: ['svg'] }

}))

],

}

Rollup 支持我在這里使用的環(huán)境變量： process.env.NODE_ENV === "production"

這允許您創(chuàng)建 npm 腳本package.json以輕松包含或不包含縮小，例如：

"scripts": {

"tsc": "tsc",

"tsc:w": "tsc -w",

"lite": "lite-server",

"rollup": "rollup -c",

"rollupw": "rollup -cw",

"start": "concurrently \"npm run rollupw\" \"npm run lite\"",

"startprod": "NODE_ENV=production concurrently \"npm run rollupw\" \"npm run lite\"",

"production": "NODE_ENV=production npm run rollup"

},

然后你可以在終端中運行npm run production例如構(gòu)建縮小包。

您可以在每個項目的 GitHub 上找到更多詳細(xì)信息。

反對回復(fù) 2021-10-21

1 回答
0 關(guān)注
136 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

編譯TypeScript時如何處理外部模塊？

編譯TypeScript時如何處理外部模塊？

1 回答

添加回答

編譯TypeScript時如何處理外部模塊？