TOC
最近在工作中写了一个面向 PC 端的 Vue 滚动组件,关于 PC 端的滚动组件以前也用过一些,但是没有找到特别满意的,所以自己想着把这个组件开源发布出去,希望能够帮到和我有类似需求的人吧!
目标
- 拥有 Dev 模式,能够边测试边开发组件
- 构建完成后发布到 npm 上
- 这个组件能够全局注册 也能够局部使用
- 拥有 demo 能力 依靠于 github 的 pages 功能 直接展现该组件的使用效果
构建基本模版
首先我们需要 vue-cli 来为我们生成一个项目的初始模板。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue init webpack-simple <project-name>
cd project-name
npm init
git init
npm init 和 git init 的过程就略过了
修改目录
接下来在src/
目录下创建一个 components 目录,随后在 components 目录下建立你的组件,比如scrollbars.vue
继续在src/
下创建index.js
这个 js 将会在 build 模式下作为入口 js 进行打包,如果你要导出多个组件也是可以的,只要导出一个对象即可
import Scrollbars from './components/scrollbars.vue'
Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars)
export default Scrollbars
配置打包环境
为了方便我们的开发,需要配置一下 webpack 的打包配置。
首先在 package.json 里增加一条脚本 dmeo 该命令的作用是一键打包出一个用于 demo 页面的主 js 文件
"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"
接下来就是比较核心的 webpack 配置
const NODE_ENV = process.env.NODE_ENV
// 为了方便在不同模式下的路径配置,我们配置三个map对象来匹配具体的模式,减少复杂的判断
// 三种基本模式
// 1 build - production 用于打包核心组件代码 别人引入的就是这个文件
// 2 dev - development 开发模式 调试你的组件
// 3 demo - 打包demo资源 打出来的js是包含完整的vue源码的
const enteyMap = {
production: './src/index.js',
development: './src/main.js',
demo: './src/main.js'
}
const pathMap = {
production: './dist',
development: './demo',
demo: './demo'
}
const publicMap = {
production: '/dist/',
development: '/demo/',
demo: '/demo/'
}
module.exports = {
entry: enteyMap[NODE_ENV], // 引入路径 build模式下直接引入组件自身
output: {
path: path.resolve(__dirname, pathMap[NODE_ENV]), // 输出路径
publicPath: publicMap[NODE_ENV], // 资源引入路径 为了方便我们的demo打包 开发模式和demo模式相同
filename: 'vue-scrollbars.js', // 你的组件名称
library: 'vue-scrollbars', // 填写组件名称即可 人家可以通过这个名称来引入
libraryTarget: 'umd',
umdNamedDefine: true
}
}
进行开发
由于我们修改了 publicPath 我们需要修改一下index.html
的 js 路径
<script src="./demo/vue-scrollbars.js"></script>
npm run dev
开始开发吧,尽情的在 app.vue 中引入你的组件并进行调试开发
创建 demo
npm run demo
打包完成后你可以尝试在工程根目录运行http-server
来检查 demo 能否正常运行。
到这一步你可以 push 到你的 github 仓库,并把 gh-pages 设置成 master 分支,那个地址应该就能展示你的 demo 了,别忘了放到 readme 中让大家看看哦!
发布
npm login
npm publish
注意可能会出现重名情况,这时候请使用你账户的命名空间
修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars"
别人引入的时候也要加命名空间