本文主要是介绍使用webpack给大屏自适应插件autofit.js增加umd打包方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
最近有个大屏自适应的需求,而且想直接通过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地址
这篇关于使用webpack给大屏自适应插件autofit.js增加umd打包方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!