1. 程式人生 > >webpack typescript 載入 js 模組報錯解決方案

webpack typescript 載入 js 模組報錯解決方案

環境

webpack:4.10.2

typescript:2.9.1

ts-loader:4.3.0

ts-node:6.1.0

載入js檔案情況這些

  1. ts 載入commonjs 模組
  2. ts 載入umd 庫
  3. ts 載入全域性庫
  4. ts 載入ES6 模組

參考文章 webpack中文網提供的文件

1 使用typescript 配置webpack

2 typescript webpack指南

當然文件不細看也整不對,先說對應的解決辦法

【1】ts 載入commonjs 模組

載入方式,按typescript 文件 給出的方式,必須使用TypeScript提供的特定語法import module = require("module")

如下圖所示:


當然 這些都不是關鍵,關鍵在tsconfig.json

module  為commonjs

allowJs 為 true !!!!!!!!!!!!!!這個很重要

參見 tsconfig.json 配置文件


【2】載入UMD模組庫

關於庫的識別請參考 typescript 文件

載入這樣的模組比較簡單,比如npm 安裝的 jquery 包可以這樣載入,

前提是必須安裝對應的types宣告檔案

npm install @types/[email protected]


【3】載入全域性庫

拿webuploader 來舉例 目錄結構如下


載入這樣的全域性庫 使用

import WU =require('webuploader');

其次就是宣告檔案的編寫,庫型別的識別及宣告檔案的編寫,詳見 typescript   宣告模板

需要注意的是,宣告檔案的命名是 moduleName.d.ts 而不是檔名,和模組放在同一目錄就可以

 比較坑的一點是,儘量慎重操作不要給宣告檔案在webstrom 裡重新命名,就算改回來也會報錯,原因待查


【4】 載入ES6 載塊,

    待續。。。。