从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个能够直接引用的js文件)

时间 2020-09-14

标签开始开发一个 vue 组件打包并发 npm 能够直接引用文件栏目 JavaScript 繁體版

原文原文链接

本身写的组件有的也挺好的，为了方便之后用本身再用或者给别人用，把组件打包发布到npm是最好不过了，本次打包支持支持正常的组件调用方式，也支持Vue.use, 也能够直接引用打包好的js文件，配合vue.js 就不须要webpakc这种构建工具了，能够直接在页面内使用，下面以 ‘yyl-npm-practice’ 这个包为例javascript

第一步：使用 vue init webpack-simple yyl-npm-practice 初始化项目

提示: 不要用 vue init webpack npm-practice 初始化项目，由于咱们就开发个组件，不须要那么多配置，配置多了修改起来也麻烦，webpack-simple足够了。css

初始完项目，按照提示输入项目信息便可，而后 npm install , npm run dev 让项目跑起来，以下图：html

第二步：修改文件目录

1.在src目录下新建components文件夹，而后在此文件夹下创建Main.vue文件

　　Main.vue 名字也能够是其余，咱们写的这个组件就是放在该文件里面，以前的App.vue是用于本地开发，测试用的入口文件，也就是用于 npm run dev 的入口文件。vue

2.在webpack.config.js同级目录（也是该组件的根目录）下新建 index.js文件， index.js是把Main.vue文件暴露出去的出口。

修改完以后的文件目录以下，标红的就是新增的内容：java

第三步：修改文件内容，配置

1.Main.vue内容以下（注意name）：

<template>
  <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'yyl-npm-practice',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props: {
      propData: {
          type: String,
          default: '我是默认值'
      }
  }
}
</script>

<style lang="scss">
.container{
    text-align: center;
}
</style>

2.App.vue内容以下：

<template>
  <div>
    <Main :propData='initData'/>
  </div>
</template>

<script>
import Main from './components/Main'
export default {
    data(){
      return {
        initData: 'hello 你好'
      }
    },
    components:{
      Main
    }
}
</script>

<style>

</style>

3.index.js内容以下：

import Main from './src/components/Main'

// 这一步判断window.Vue是否存在，由于直接引用vue.min.js，它会把Vue绑到Window上，咱们直接引用打包好的js才能正常跑起来。

if (typeof window !== 'undefined' && window.Vue) {

window.Vue.component('yyl-npm-practice', Main)

}

//这样就可使用Vue.use进行全局安装了。

Main.install = function(Vue){

Vue.component(Main.name, Main)

}

export default Main

------ start 2019-05-06新增
index.js内容改完以下， 由于使用 window.Vue.component('yyl-npm-practice', Main) 的时候 外部引用的时候 有可能会覆盖该组件，致使组件没法正常使用；
使用下面的的定义方式后， 在.vue 环境下 使用方式不变， 在只引用 ys-expression.js 环境下 需在 new Vue（） 以前加 window['ys-expression'].default.install();

import Main from './src/component/Main'
import _Vue from 'vue'

Main.install = Vue => {
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(Main.name, Main)
}
export default Main;

------ end 2019-05-06新增

4.修改package.json

package.json须要修改private字段(private是true的时候不能发布到npm,需设置成false)；并增长main字段， main字段是require方法能够经过这个配置找到入口文件，这输入模块加载规范，具体能够参考这里，主要内内容截图以下：node

修改完package.json以下，标红的就是新增和改变的属性。jquery

5.修改 webpack.config.js

其实就是修改entry 和output,截图以下：
webpack

说明：入口会根据开发环境，生产环境切换， main.js 是npm run dev 的入口，就是App.vue，用于调试/测试咱们开发的组件; index.js是Main.vue，就是咱们开发的组件，咱们打包到生产环境打包就只是单纯的 yyl-npm-practice 组件web

6.修改index.html的js引用路径，由于咱们修改了output 的 filename，因此引用文件的名字也得变。

到此组件就开发完了，打包下看看， npm run build dist下生成了俩文件，以下：express

这个.map文件怎么回事，其实就是这段代码：

生产环境的时候，咱们就不调试了，也不想要这个.map文件，那就先把这个 devtool删了，而后放在这里，看下图，只要在开发环境的时候才启用这个调试，

把dist目录下的俩文件删除，再npm run build 就不会产生.map文件了。

npm run dev 让项目跑起来，咱们在App.vue里面调用该组件，并作测试，调试。

第四步：发布到npm

1. 去 npm 官网注册个帐号 https://www.npmjs.com/

2.在该组件根目录下的终端（就是日常输入 npm run dev的地方），运行npm login，会提示输入我的信息，Email是发布成功后，自动给这个邮箱发送一个邮件，通知发布成功，输入完，登陆成功。

3.最后就能够发布了， npm publish, 以下，发布成功(每次发布的时候packa.json 里面的 version不能同样，否则不能发布出去，手动改下版本就行)

去本身的npm上点击Packages ，就能看到发布的包

包的具体信息以下：

你们最好在readme 里面写上组件的使用方法，说明等等，方便你我他。

使用方法：

1.组件内部使用

html:

　　<Main/>

js：

import Main from 'yyl-npm-practice'

components: {

Main

}

2. main.js 全局安装：

import Main from 'yyl-npm-practice'

Vue.use(Main)

而后在其余.vue文件里面，直接使用组件 <yyl-npm-practice/> 便可

3.直接引用打包后的 yyl-npm-practice.js

这种方式就不须要webpack这类的构建工具，跟jquery的方式差很少，能够直接页面引用，使用方法示例以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <yyl-npm-practice :propData="propData"></yyl-npm-practice>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/yyl-npm-practice.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        propData: '11111111111111111111'
      }
    },
    methods: {
    }
  })
</script>
</body>
</html>

采坑记录：

1.在webpack.config.js里设置 resolve（好比设置@作为根目录），开发环境没问题，生产环境就用不了了，因此你们就用日常的相对路径类吧，虽然麻烦了点。

2.图片生产环境不能用，解决方法能够把图片转成base64, 能够用这个在线图片转base64,或者把图片放在网上，引用图片的网上资源路径。

3.字体图标在生产环境也用不了，若是用到了字体图标，就别把字体图标的资源打包进去了，引用该组件的时候，须要再引用字体图标的资源。

start ====> 2019-04-17更新

　　　　后来发现其实图片和字体图标也可一块儿打包到js里面，须要用到 url-loader 把limit参数设置大点就行，这样就能够把图片，字体图标也都打包到js里面了，这样使用的时候，就不用单独引用这些静态资源了，代码以下：

  {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]',
          limit: 99999
        }
      },
      { 
      　　test: /\.(svg|ttf|eot|woff|woff2)$/, 
      　　loader: 'url-loader', 
      　　options:{ 
  　　　　   name:'[name].[ext]',
            limit: 9999999
      　　} 
      }

end ====> 2019-04-17更新

想看源码的话，只要在本身项目里 npm install yyl-npm-practice 就能够在 node_modules 下找到了。