vue开发组件及npm发布

1、用vue-cil初始化组件

  vue init webpack vue-own-component
  cd vue-own-component
  npm i
  npm run dev

2、根据自己需求，实现具体功能，blablabla......❤

3、添加install.js (本文添加在根目录下)

 import ownComponent from './src/components/ownComponent.vue'
//定义一个对象 需要install方法
const exportComponent = {
   install(Vue,options) {
       if(typeof window !== 'undefined' && window.Vue)    {
           Vue = window.Vue
         }
       //全局注册组件（组件名，组件）
       Vue.component(ownComponent.name, ownComponent)
   }
}
export default exportComponent

4、修改package.json

• 将private改成false，因为组件包是公用的
• 配置main "main": "dist/own-custom-file-name.min.js" （配置了这个，才可以在其他项目中直接import '包名'）
• 配置files "files":[ "dist","src"] 指定打包之后，包中存在的文件夹
• 为方便修改维护，复制了一份打包配置build.js为pack.js来修改，所以scripts需要加上 "pack": "node build/pack.js"
  package.json配置

5、修改配置文件

复制build.js为pack.js,复制base.conf.js和prod.conf.js

build文件结构图

• pack.js修改一句：

const webpackConfig = require('./webpack.pack.prod.conf')

• webpack.pack.base.conf.js修改entry入口：

entry: {
  app: './src/install.js'
}

• webpack.pack.prod.conf.js

const baseWebpackConfig = require('./webpack.pack.base.conf')
......
//修改output
output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '',
    filename: '自定义文件名.min.js',
    library: 'VueVideoMeeting', //library指定的就是你使用require时的模块名
    libraryTarget: 'umd', //打包格式，选umd支持node和浏览器2种执行坏境
    umdNamedDefine: true
  },
//添加external，解决以<script>标签形式使用打包后的组件时，出现vue未定义
 externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
//修改打包css
 new ExtractTextPlugin({
      filename: '自定义文件名.min.css',
      allChunks: true,
    }),
//还需要删除一系列不需要的配置,否则执行npm run pack会在dist文件下生成一堆不需要的

6、然后npm run pack打包一次 会在dist文件里生成对应的js和css

7、可以本地index.html通过script标签引入dist生成的打包js本地测试一下

如果报错 应该是未注入组件，则可以去install.js新增：

if （typeof window !== 'undefined' && window.Vue） {
  window.Vue.use(组件名)
}

再次打包npm run pack即可。

8、npm run pack打包后没问题 就可以发布npm包了

9、发布npm包

• 前提：有npm的账户
• npm login
  输入自己的username,password和email
• npm publish

---

注意： 每次publish时都要改版本号并pack一下

版本号：

eg：
1.0.0
major.minor.patch
major: 主版本号
minor: 次版本号
patch: 修订号

🎗ps:

• 如果每次publish时忘记build（偶经常会忘记嗨* ~ *😀）,可以在package.json里scripts配置

   "pub": 'npm run build &&  npm publish'

• 改版本+打包+发布

    "pub:patch": "npm version patch && npm run pack &&   npm publish",
    "pub:minor": "npm version minor && npm run pack && npm publish",
    "pub:major": "npm version major && npm run pack && npm publish"

❣❣❣ 再一次注意:这边提交可能会报Git working directory not clean 的错，是因为你的修改未提交git,必须提交git后才能执行打包发布命令，这样能保证你发布的包和本地代码保持同步。

---

🎗补充：这边顺便提一下git忽略已加入版本控制的文件，因为自己做项目时一开始把dist文件夹从.gitignore删了，导致后面每次打包还得提交下dist下的文件，后面再在.gitignore添加忽略/dist/发现无效，需要强制忽略命令：

git update-index --assume-unchanged dist/xxx.min.js

赞赞哇.png