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

最近有个大屏自适应的需求,而且想直接通过script标签来引入自适应的插件js,搜索相中了autofit.js,可惜不支持umd格式的引入,虽然也能直接copy源码,但是还是折腾下给它打包成umd格式的代码。

fork源码,克隆到本地。

安装webpack,webpack-cli

bash 复制代码
npm install webapck webpack-cli -D

配置webpack.config.js

typescript 复制代码
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包

bash 复制代码
npm login # 输入 username ,password,email进行登录
npm publish --access=public

npm地址

相关推荐
blackorbird16 分钟前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者1 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强1 小时前
Chrome和IE获取本机ip地址
前端
天***88961 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*1 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v2 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls2 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友2 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda2 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#