關(guān)于包的初始化和開發(fā)過程請(qǐng)參考其他文章。
談下在開發(fā)完成后，遇到了以下問題和解決方法。
首先上渴，需要一個(gè)測(cè)試環(huán)境來驗(yàn)證代碼正確性，我的包的項(xiàng)目結(jié)構(gòu)如下：
-- demo // 測(cè)試頁面
-- lib // 最終上傳npm的包
-- node_mudules
-- src
...... // 其他文件
在demo目錄下我建立了如下文件：
// ./demo
-- index.css
-- index.html
-- index.ts
./demo/index.ts將會(huì)是模擬使用者引入并使用包的入口
import 包 from '../src.index'
// 使用者寫業(yè)務(wù)代碼
......
下面開始測(cè)試喜颁，把index.ts引入index.html稠氮。
錯(cuò)誤一
Cannot use import statement outside a module
由于我的包還有依賴，使用了import引入半开，所以有這個(gè)報(bào)錯(cuò)隔披，那么我給加入一個(gè)標(biāo)簽類型
// ./demo/index.html
<script type="module" src="./index.ts"></script>
錯(cuò)誤二
Access to script at 'file:///C:/Users/?/Documents/?/demo/index.ts' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
我是本地文件直接訪問，但type='module'不支持寂拆，直接報(bào)了跨域奢米，那么我啟動(dòng)一個(gè)本地服務(wù)器代理（比如http-server）。
錯(cuò)誤三
開啟代理后纠永，發(fā)現(xiàn)我依賴的包開始報(bào)錯(cuò)鬓长。
原因是這個(gè)包是沒有被代理的，我只是引入了本地文件尝江，在本地文件里引入了包涉波。
這個(gè)時(shí)候我發(fā)現(xiàn)需要一個(gè)webpack來把我的代碼，和我依賴的包進(jìn)合并pack炭序，并且順便把ts轉(zhuǎn)換為js文件啤覆。
于是我使用了webpack5，并作為我的開發(fā)依賴使用惭聂。因?yàn)樾枰尤肱渲梦募蛅s編譯設(shè)置窗声，我的demo文件下變成了這樣：
// ./demo
-- index.css
-- index.html
-- index.ts
-- tsconfig.json // new
-- webpack.config.js // new
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./demo/index.ts", // 注意此處為相對(duì)項(xiàng)目根目錄
devtool: "inline-source-map",
mode: "development",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
watch: true,
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
};
運(yùn)行webpack，生成了一個(gè)dist文件夾彼妻，里面含有打包出來的js文件嫌佑，包含了我的代碼和我的依賴包。
// ./demo
-- dist
-- main.js
-- index.css
-- index.html
-- index.ts
-- tsconfig.json // new
-- webpack.config.js // new
此時(shí)html文件直接可以引入侨歉，不再需要代理屋摇。
// index.html
<script src="./dist/main.js"></script>
錯(cuò)誤四
還是出問題了，如果你的NPM包沒有依賴其他包幽邓，不會(huì)出現(xiàn)這個(gè)問題炮温，但是我有運(yùn)行依賴，所以出現(xiàn)了新錯(cuò)誤：Module not found: Error: Can't resolve 'xx' in 'xx'
解決方案
// webpack.config.js
......
module: {
rules: [
// add
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
// add end
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
......
直接在rule內(nèi)加上此規(guī)則牵舵，問題的根源是webpack v5對(duì)于import語法進(jìn)行了更嚴(yán)格的限制柒啤。
import name from 'pack_name'
// 需要加入擴(kuò)展名 .js
import name from 'pack_name.js'
沒有指定后綴會(huì)導(dǎo)致報(bào)錯(cuò)，此問題并非webpack導(dǎo)致畸颅，在node14中同樣會(huì)異常，即ESM中的import需要指明模塊的拓展名。
相關(guān)issue被提到了typescript里面：Provide a way to add the '.js' file extension to the end of module specifiers
