npm发布自己的vue包

文章是网上参考而来

1.写自己的npm包一定要注册自己的npm账号

2.创建自己的npm包

i.在自己的目录下进行npm init

name：
包的名字，默认是你这个文件夹的名字。先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 要取的名字，如果没有报错，npm上没有跟你同名的包，把包发布出去。如果成功下载下来了，则不能发布。

version：
你这个包的版本，默认是1.0.0

description：
包的作用

entry point：
入口文件，默认是Index.js，你也可以自己填写你自己的文件名

test command：
测试命令，这个直接回车就好了，因为目前还不需要这个。

git repository：
这个是git仓库地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。

keyword：
这个是一个重点，这个关系到有多少人会搜到你的npm包。

author：写你的账号或者你的github账号吧

license：这个直接回车，开源文件来着。。。

ii.建立src文件夹，并建立index.js

注意目录结构入下
-package.json
-package-lock.json
-src/index.js
-node_module[如果没有引入包等就不会产生该文件夹]

iii.我们写a+b的代码

在index文件中写入代码

function add (num1, num2) {
    num1 = parseFloat(num1)
    num2 = parseFloat(num2)
    return num1 + num2
}  
module.exports = add;

iiii.最重要的，写好README.md，大家知道该包的作用

3.登陆发布包

i登陆

npm login
或者使用添加npm用户
npm adduser
按照提示输入自己的用户名和密码

ii发布包

然后，在你的目录下使用npm publish
npm publish
注意：每一次发布新的一版，version版本要改变，不然npm会给我报错。一般情况下，一旦你要修改你已经发布后的代码，然后又要执行发布操作，务必到package.json里面，把version改一下，比如从1.0.0改为1.0.1，然后在执行npm publish，这样就可以成功发布了

从零发布vue包，vue-cli不限

我使用的4.5.13的

image.png

第一步：使用 vue init webpack-simple h5-select-multiple 初始化项目

h5-select-multiple修改成自己项目名称。

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

image

第二步：修改文件目录

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

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

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

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

image.png

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

1.编写select-multiple.vue 组件

2.把编写的select-multiple.vue 组件引入App.vue中进行测试开发

3.index.js内容如下：

import Main from './src/components/select-multiple'
// 这一步判断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

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

4.修改package.json

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

image

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

 "private": false, // 因为组件包是公用的，所以private为false
  "main": "./dist/h5-select-multiple.js", //  采用commonJs入口文件，如果不配置，我们在其他项目中就不用import XX from XX来引用了，只能以包名作为起点来指定相对的路径

5.修改过的 webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
 // entry: './src/main.js',
 entry: process.env.NODE_ENV === 'production'?"./index.js":'./src/main.js', // 入口文
 output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
    // filename: 'build.js'
  filename: "h5-select-multiple.js", // 生成的文件名
  library: "h5-select-multiple", // 指定的就是你使用require时的模块名
  libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  // devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  // module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}else {
  module.exports.devtool = '#eval-source-map'
}

修改地方：module.exports

entry

 entry: process.env.NODE_ENV === 'production'?"./index.js":'./src/main.js', // 入口文件

output

 output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
    // filename: 'build.js'
  filename: "h5-select-multiple.js", // 生成的文件名
  library: "h5-select-multiple", // 指定的就是你使用require时的模块名
  libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },

生产环境的时候，我们就不调试了，也不想要这个.map文件，那就先把这个 devtool删了

devtool

// devtool: '#eval-source-map' // 删除或注释

修改地方：if (process.env.NODE_ENV === 'production')

//module.exports.devtool = '#source-map' //删除或注释件

在if后面加

else {
  module.exports.devtool = '#eval-source-map' 
}

npm run build

6.修改index.html的js引用路径，因为我们修改了output 的 filename，所以引用文件的名字也得变。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>h5-select-multiple</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script src="/dist/build.js"></script> -->
    <script src="/dist/h5-select-multiple.js"></script>
  </body>
</html>

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

第四步：发布到npm

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

2.最后就可以发布了， npm publish, 如下，发布成功(每次发布的时候packa.json 里面的 version不能一样，不然不能发布出去，手动改下版本就行)

发布失败的话，根据提示百度解决。

去自己的npm上点击Packages ，就能看到发布的包

使用方法：

1.组件内部使用

html:

js：

import selectMultiple from 'h5-select-multiple'

components: {

  selectMultiple

}

2. main.js 全局安装：

import selectMultiple from 'h5-select-multiple'

Vue.use(selectMultiple )

然后在其他.vue文件里面，直接使用组件 <h5-select-multiple/> 即可

3.直接引用打包后的 h5-select-multiple.js

这种方式就不需要webpack这类的构建工具，跟jquery的方式差不多，可以直接页面引用，使用方法示例如下：

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

采坑记录：

1.在webpack.config.js里设置 resolve（比如设置@做为根目录），开发环境没问题，生产环境就用不了了，所以大家就用平常的相对路径类吧，虽然麻烦了点。

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

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

后来发现其实图片和字体图标也可一起打包到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
      　　} 
      }

想看源码的话，只要在自己项目里 npm install h5-select-multiple 就可以在 node_modules 下找到了。

喜欢的话点赞收藏关注，不定时发布更多文章。

npm发布自己的vue包