使用webpack给大屏自适应插件autofit.js增加umd打包方式

本文主要是介绍使用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打包方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---