关于包的初始化和开发过程请参考其他文章。
谈下在开发完成后，遇到了以下问题和解决方法。
首先，需要一个测试环境来验证代码正确性，我的包的项目结构如下：
-- demo // 测试页面
-- lib // 最终上传npm的包
-- node_mudules
-- src
...... // 其他文件
在demo目录下我建立了如下文件：
// ./demo
-- index.css
-- index.html
-- index.ts
./demo/index.ts将会是模拟使用者引入并使用包的入口
import 包 from '../src.index'
// 使用者写业务代码
......
下面开始测试，把index.ts引入index.html。
错误一
Cannot use import statement outside a module
由于我的包还有依赖，使用了import引入，所以有这个报错，那么我给加入一个标签类型
// ./demo/index.html
<script type="module" src="./index.ts"></script>
错误二
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'不支持，直接报了跨域，那么我启动一个本地服务器代理（比如http-server）。
错误三
开启代理后，发现我依赖的包开始报错。
原因是这个包是没有被代理的，我只是引入了本地文件，在本地文件里引入了包。
这个时候我发现需要一个webpack来把我的代码，和我依赖的包进合并pack，并且顺便把ts转换为js文件。
于是我使用了webpack5，并作为我的开发依赖使用。因为需要加入配置文件和ts编译设置，我的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", // 注意此处为相对项目根目录
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"),
},
};
运行webpack，生成了一个dist文件夹，里面含有打包出来的js文件，包含了我的代码和我的依赖包。
// ./demo
-- dist
-- main.js
-- index.css
-- index.html
-- index.ts
-- tsconfig.json // new
-- webpack.config.js // new
此时html文件直接可以引入，不再需要代理。
// index.html
<script src="./dist/main.js"></script>
错误四
还是出问题了，如果你的NPM包没有依赖其他包，不会出现这个问题，但是我有运行依赖，所以出现了新错误：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内加上此规则，问题的根源是webpack v5对于import语法进行了更严格的限制。
import name from 'pack_name'
// 需要加入扩展名 .js
import name from 'pack_name.js'
没有指定后缀会导致报错，此问题并非webpack导致，在node14中同样会异常，即ESM中的import需要指明模块的拓展名。
相关issue被提到了typescript里面：Provide a way to add the '.js' file extension to the end of module specifiers
网友评论