最近有个大屏自适应的需求,而且想直接通过script标签来引入自适应的插件js,搜索相中了autofit.js
,可惜不支持umd格式的引入,虽然也能直接copy源码,但是还是折腾下给它打包成umd格式的代码。
fork源码,克隆到本地。
安装webpack,webpack-cli
npm install webapck webpack-cli -D
配置webpack.config.js
const path = require("path");
module.exports = [
{
mode: "production",
entry: "./autofit.js",
output: {
filename: "autofit.umd.js",
path: path.resolve(__dirname, "dist"),
library: {
type: "umd",
name: "Autofit",// 配置库的名称,window.Autofit
},
},
},
{
mode: "production",
entry: "./autofit.js",
experiments: {
outputModule: true,// webpack输出esm模块需要配置该项,打包库最好还是用rollup其他的,webpack还是适合打包application
},
output: {
filename: "autofit.esm.js",
path: path.resolve(__dirname, "dist"),
library: {
type: "module",// 打包成esm模块
},
},
},
];
npx webpack 执行打包命令
输出到dist目录。
发布npm包
npm login # 输入 username ,password,email进行登录
npm publish --access=public
npm地址