最近项目不是很忙,去研究了下封装Vue组件并发布到npm的流程,简单的记录下, 源码传送门。在动手开发之前去看了下element的源码,有很多值得学习的地方,如果对封装vue组件感兴趣的推荐一定要去看一看。
一、首先是项目环境的搭建。
主要还是配置webapck,之前一直使用vue-cli创建项目,对这块不是很熟折腾了一会儿。
主要用到的依赖:vue,vue-template-compiler, vue-loader,webpack,webpack-cli,webpack-dev-server等。
npm init , 再install需要的依赖。
项目目录结构如下:
build放打包配置的文件;在开发过程中我们需要调试 dist放用来调试的打包后文件;lib用来组件发布的打包后文件;packages用来放实际的组件代码;src/index.js是整个组件库的入口文件
之前一直是使用vue-cli脚手架来创建项目 自己很少去配一个webpack的环境。遇到的一些问题如下:
1.打包.vue文件 。主要使用 vue-loader 要使用一下VueLoaderPlugin 要不然会有问题。
//在wbepack配置文件中
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},
]
},
plugins: [
new VueLoaderPlugin()
],
2.指定打包后的文件打包到哪
比如我们想打包后的文件目录如下(打包到dist目录下,assets目录下分别有js css文件夹, 放打包后的js、css文件):
配置output 和使用mini-css-extract-plugin插件就可以了
output: {
path: path.resolve(__dirname, "../dist"),
filename: "aseets/js/[name].[hash:7].js",
chunkFilename: "[name].js"
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
//每次打包先把dist清空再打包 之前打包的文件会被清理
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "aseets/css/[name].[contenthash:7].css"
})
],
package.json再配置下命令如下:
"scripts": {
"watch": "webpack --config build/webpack.dev.js --watch",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.dev.js",
"build:lib": "cross-env NODE_ENV=production webpack --config build/webpack.lib.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js"
},
开发的时候 先npm run watch ,再起一个命令窗口 npm run dev 这样代码改变页面就会自动更新了 提高开发效率。
针对发布到npm webpack配置(webpack.lib.js)如下:
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "../lib"),
filename: "[name].js",
chunkFilename: "[name].js",
library: 'faveur', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
//output 后两项是必须 否则发布到npm再使用会有问题
二、组件代码的编写
和正常使用Vue写业务是一模一样的。
//input.vue
<template>
<input @input="handleInput" class="fu-input__inner" v-bind="$attrs"/>
</template>
<script>
export default {
name: "FuInput",
props: {
value: [String, Number],
},
data() {
return {};
},
methods: {
handleInput(e) {
this.$emit('input', e.target.value)
}
}
};
</script>
// index.js
import FuInput from "./src/input";
/* istanbul ignore next */
FuInput.install = function(Vue) {
Vue.component(FuInput.name, FuInput);
};
export default FuInput;
项目入口文件 src/index.js:
import Button from '../packages/button/index.js';
import Input from '../packages/input/index.js';
const components = [
Button,
Input,
]
const install = function(Vue, opts = {}) {
components.forEach(component => {
Vue.component(component.name, component);
});
}
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
}
三、发布到npm
首先去npm官网申请个账号;然后在命令行里 npm login 按提示输入账号、密码; 然后npm publish 。
注意点:1.你的包名 就是package.json里的 name 不能是已经存在的,事先可以去npm官网搜一下 看你取的名称是不是有人用过了。
2. 发布之后 再更新发布 需要改版本号 就是package.json里的version 否则会报错 You cannot publish over the previously published versions: xxx.
四、页面中使用
以我自己的为例:
npm install faveur
在入口文件main.js中引入
import Faveur from 'faveur';
import 'faveur/packages/theme-chalk/src/index.scss';
Vue.use(Faveur);
//页面使用
<fu-input placeholder="请输入内容" class="input"/>
通过这次尝试,对从头开始配webpack打包配置更加熟悉;对组件封装从开发到发布的流程也有了一个简单的了解。如果有什么疑问或建议欢迎大家交流学习。