发布 npm 包

发布 npm 包

1.项目初始化

vue init webpack-simple 项目名称

项目结构如下

2.components/index.js 文件下 引入文件组件

import zlCalendar from './zl-calendar'
import zlRange from './zl-range'
import zlSlideDelete from './zl-slide-delete'
const comment = {
  install:function(Vue){
    Vue.component('zlCalendar', zlCalendar)
    Vue.component('zlRange', zlRange)
    Vue.component('zlSlideDelete', zlSlideDelete)
  }
}
// global 的状态下自动安装
if(typeof window !== 'undefined' && window.Vue){
  window.Vue.use(comment)
}
// 导出模块
export default comment

3. 修改 package.json

{
  "name": "zl-vue-ui",
  "description": "A Vue.js project",
  "version": "1.0.3",
  "author": "徐其闯 <xqc1319681561@163.com>",
  "main": "dist/zl-vue-ui.js",// 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
  "license": "MIT",
  "private": false, // 因为组件包是公用的，所以private为false
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "repository": { // 指定代码所在的仓库地址
    "type": "git",
    "url": "git+https://github.com/xuqichuang/zl-vue-ui.git"
  },
  "dependencies": {
    "better-scroll": "^1.14.1",
    "moment": "^2.24.0",
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "keywords": [// 指定关键字
    "vue",
    "vue-ui"
  ],
  "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.9.3",
    "sass-loader": "^7.1.0",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

4.修改webpack.config.js

// entry: './src/main.js',
  entry: './src/components/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    // filename: 'build.js'
    filename: 'zl-vue-ui.js',
    library: 'zl-vue-ui',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },

5.修改.gitignore 文件

因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。

6.修改index.html

<!-- <script src="/dist/build.js"></script> -->
    <script src="/dist/zl-vue-ui.js"></script>

7.测试插件

在发正式包之前可以在本地先打一个包，然后测试下有没有问题，如果没问题再发布到npm上。

• 首先，打包到本地 npm run build
• npm pack
• npm pack 之后，就会在当前目录下生成 一个tgz 的文件。
  打开一个新的vue项目，在当前路径下执行(‘路径’ 表示文件所在的位置)
• npm install 路径/组件名称.tgz

//使用方法
import 变量名 from '组件名称'
Vue.use(变量名)

8.发布到NPM

1. 在 npm官网 注册一个npm账号
2. 切换到需要发包的项目根目录下，npm login登录npm账号，输入用户名、密码、邮箱
3. 最后一步，执行npm publish即可

发布到NPM后，使用插件时可以用npm install 组件名称 来安装

更多详细知识介绍请访问我的个人主页