1. 前言
之前总是 NPM install 别人的包, 使用别人的插件, 刚好最近面试, 面试官有问, 自己写过插件吗? 这不, 今天花了一下午的时间, 搞了一下这玩意~
这里我写了一个对话弹窗的组件, 嗯, 因为之前用别的框架, 对话框 Modal 总是无法改成自己想要的, 于是自己写了一个, 突然一想, 为何不做成一个 NPM 包呢, 话不多说, 开始吧
这里是基于 vue 开发的自己一个 NPM 包, 可能写得很菜, 但是我很认 (可) 真 (爱)
建议边看我的 GitHub 代码, 边对应着就不会很懵, https://github.com/PDKSophia/p-dialog-modal
2. 步骤
一: 跟平常一样写我们的 vue 代码
二: 发布到 NPM 上
2.1 新建一个空白文件夹
mkdir NPM // 这里文件夹名为 NPM
2.2 初始化项目
初始化项目. 然后会让你填一些项目相关的信息, 跟着提示填就是了. 没啥说的. 注意 name 不要和现有的其他 NPM 包重名了, 不然一会儿发 NPM 包的时候会失败, 可以先去 npmjs.com 搜一下有没有重名的.
NPM init
2.3 package.JSON
因为这是一个 vue 的组件包, 而且使用了 es6 和 webpack, 所以在 devDependencies 字段中, 应该至少加入以下依赖, 下边这是我的 package.JSON, 对应的字段, 自己查一哈
- {
- "name": "p-dialog-modal",
- "version": "1.0.3",
- "description": "弹窗组件, 自己的第一个 npm 包, 有些粗略和简单",
- "main": "dist/pdkModal.min.js",
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "start": "webpack-dev-server --hot --inline",
- "build": "webpack --display-error-details --config webpack.config.js"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/PDKSophia/p-dialog-modal.git"
- },
- "author": "PDK",
- "license": "ISC",
- "bugs": {
- "url": "https://github.com/PDKSophia/p-dialog-modal/issues"
- },
- "homepage": "https://github.com/PDKSophia/p-dialog-modal#readme",
- "devDependencies": {
- "babel-core": "^6.26.0",
- "babel-loader": "^7.1.2",
- "babel-plugin-transform-object-rest-spread": "^6.26.0",
- "babel-plugin-transform-runtime": "^6.23.0",
- "babel-polyfill": "^6.26.0",
- "babel-preset-es2015": "^6.24.1",
- "CSS-loader": "^0.28.7",
- "es6-promise": "^4.1.1",
- "less": "^2.7.3",
- "less-loader": "^4.0.5",
- "style-loader": "^0.19.0",
- "url-loader": "^0.6.2",
- "vue": "^2.5.9",
- "vue-hot-reload-api": "^2.2.4",
- "vue-html-loader": "^1.2.4",
- "vue-loader": "^13.5.0",
- "vue-router": "^3.0.1",
- "vue-style-loader": "^3.0.3",
- "vue-template-compiler": "^2.5.9",
- "vuex": "^3.0.1",
- "webpack": "^3.9.1",
- "webpack-dev-server": "^2.9.5"
- }
- }
2.4 执行下载依赖包
NPM install
2.5 新建 src 和 dist 文件夹
dist 代表发布时的目录, src 是开发目录. dist 里面的 JS 是到时候通过 webpack 打包后的文件. 待会只会提交 dist 目录到 NPM 官网上, src 不提交.
src 文件夹中, 我们写一个 App.vue
- <!-- app.vue -->
- <template>
- <div>
- <p > 我是 {{ user.name }}</p>
- <p > 我来自 {{ user.from }}</p>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {}
- },
- props: {
- user: {
- type: Object
- }
- }
- }
- </script>
- <style scoped lang='less'>
- </style>
src 文件夹中, 我们写一个 index.JS, 目的就是把这个 App 导出去
- // index.JS
- import NpmVue from './app.vue'
- export default NpmVue
2.6 加入 webpack 打包配置, 并把 src 中的内容打包进 dist 目录中
在根目录下新增 webpack.config.JS 文件
- const path = require("path");
- const webpack = require("webpack");
- const uglify = require("uglifyjs-webpack-plugin");
- module.exports = {
- devtool: 'source-map',
- entry: "./src/index.js",// 入口文件, 就是上步骤的 src 目录下的 index.JS 文件,
- output: {
- path: path.resolve(__dirname, './dist'),// 输出路径, 就是上步骤中新建的 dist 目录,
- publicPath: '/dist/',
- filename: 'pdkModal.min.js', // 输出文件, 对应 package.JSON 中的 main 字段
- libraryTarget: 'umd',
- umdNamedDefine: true
- },
- module: {
- rules: [{
- test: /\.vue$/,
- loader: 'vue-loader'
- },
- {
- test: /\.Less$/,
- use: [
- { loader: "style-loader" },
- { loader: "css-loader" },
- { loader: "less-loader" }
- ]
- },
- {
- test: /\.JS$/,
- exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-API\//,
- loader: 'babel-loader'
- },
- {
- test: /\.(PNG|jpg|gif|ttf|svg|woff|eot)$/,
- loader: 'url-loader',
- query: {
- limit: 30000,
- name: '[name].[ext]?[hash]'
- }
- }
- ]
- },
- plugins: [
- new webpack.DefinePlugin({
- "process.env": {
- NODE_ENV: JSON.stringify("production")
- }
- })
- ]
- };
2.7 打包
执行 NPM run build, 就会在 dist 目录下生成一个 pdkModal.min.JS, 这就是我们 NPM 包的主文件
注意, 这里要修改 package.JSON 中的 main 字段指向的主文件信息
NPM run build
修改 package.JSON 中的 main 字段
- {
- ...
- "main": "dist/pdkModal.min.js" // 换成你的
- }
2.8 忽略要上的文件
新建一个文件, 名为. npmignore, 是不需要发布到 NPM 的文件和文件夹, 规则和. gitignore 一样. 如果你的项目底下有. gitignore 但是没有. npmignore, 那么会使用. gitignore 里面的配置
- .*
- *.md
- *.YAML
- build/
- node_modules/
- src/
- test/
2.9 发布
先去 NPM 注册一个账号 (一定要进行邮箱验证), 然后进入根目录, 运行 NPM login
它会让你输入你的用户名, 密码和邮箱, 若登录成功, 会显示:
Logged in as 你的名字 on https://registry.npmjs.org/.
接着执行 NPM publish 发布到 NPM 官网上
当你的包需要更新时, 需要自己手动修改 package.JSON 中的 version 版本号, 惯例是 + 1 啦, 比如 1.0.0-->1.0.1. 然后 NPM login,NPM publish. 即可.
链接
这是我自己写的包 : https://github.com/PDKSophia/p-dialog-modal
- Blog: http://blog.pengdaokuan.cn:4001
- GitHub: https://github.com/PDKSophia/blog.io
来源: https://juejin.im/post/5bcd9ebf6fb9a05d0f171688