插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,简单说明一下这个过程,以插件名对话框为例
1,创建对话框目录,并进入
2,运行命令行,初始化项目,生成package.json
npm init - y
3,使用webpack-simple模板构建项目基本结构(前提为已自行安装好vue-cli)
vue init webpack-simple
根据导航提示,设置好项目后,基本结构生成完成
4,删除无用内容,,删除指数。html和src目录下的所有文件
5,复制插件内容到src目录中
6,修改包。json配置内容
｛
“名称”:“对话框”,
“描述”:“plguin的对话框”,
“版本”:“1.0.0”,
“作者”:“TerryZ & lt; terry5@foxmail.com>”
“许可证”:“麻省理工学院”,//删除原有的“priveate”:真的,发布到公共库的项目,不能设置该参数//增加主要配置,设置插件在安装后的主入口文件
“主要”:“dist/dialog.js”,
"脚本":{
“开发”:“cross-env NODE_ENV=发展webpack-dev-server——打开——热”,
“构建”:“cross-env NODE_ENV=生产webpack——发展——hide-modules”
},
“依赖”:{
:“vue ^ 2.5.11”
},//增加插件关键字描述,非必须,按需设置
“关键词”:[
“前端”,
“javascript”,
“对话框”,
“vue”,
“vuejs”
),
“browserslist”:(
“比;1%”,
“最后2版本”,
“不是ie & lt;=8”
),
" devDependencies ": {
:“babel-core ^ 6.26.0”,
:“babel-loader ^ 7.1.2”,
:“babel-preset-env ^ 1.6.0”,
:“babel-preset-stage-3 ^ 6.24.1”,
:“cross-env ^ 5.0.5”,
:“css-loader ^ 0.28.7”,
:“file-loader ^ 1.1.4”,
:“node-sass ^ 4.5.3”,
:“sass-loader ^ 6.0.6”,
:“vue-loader ^ 13.0.5”,
:“vue-template-compiler ^ 2.4.4”,
:“webpack ^ 3.6.0”,
:“webpack-dev-server ^ 2.9.1”
}
}
之前
7,修改webpack.config。js的输出部分配置
输出:{
路径:路径。解决(__dirname’。/dist '),
publicPath:‘/dist/',//修改输出打包后的脚本文件名,该文件即是包。json中配置的主要属性的对应文件
文件名:“dialog.js”,//增加以下库配置信息
库:“对话框”,
libraryTarget:“umd格式”,
umdNamedDefine:真
}
之前
8日安装库,国内环境建议使用cnpm安装速度会快些
npm安装- g cnpm——注册表=https://registry.npm.taobao.org
9日编译插件
npm运行构建
10,发布插件,确定你的插件名当前公共库中不存在,否则会发布失败
npm发布
插件中使用到的图片资源,在打包后,根据模板的默认配置,会将图片资源输出到dist目录中,此时就有图片引用路径问题。在样式内容中会发现原来设置的
<代码>背景图片:url(. ./图像/a.jpg)
会转换成
<代码>背景图片:url (/dist/a.jpg)
实际的完整路径即是
<代码> https://cache.yisu.com/upload/information/20200622/114/38651.jpg
我们知道插件在安装后,会统一安装在<代码> node_modules 目录中,这样的目录显然是不正确的
一种折中的办法,就是将图片资源转换成<代码> base64>
<代码> webpack-simple> file-loader> url-loader> base64>
安装url-loader
npm我url-loader——save-dev
之前
webpack配置修改(webpack-simple模板)
模块。出口={
…
模块:{
规则:[
{…},
｛
测试:/\。gif (png | jpg | | svg)/美元,
装载机:“url-loader”,
选择:{
限制:30000
名称:“[名字]。[ext] & # 63; (hash)”
}
}
]
},
…
}
