【npm】将自己的vue组件发布为npm包

转自：http://auan.cn/internet/2026.html

首先问题：开发中我们往往需要做某些功能，这个功能可能会出现很多次，也会出现在不同的项目。需要使用时候又不想重新写，怎么办呢？

解决思路：把这个特殊的需求功能做成属于自己的组件，当下次需要去使用它的时候。那么我们就可以打包这个组件并上传到npm管理库，这个库可以是自己的私有库，也可以是npmjs公共库。

一、初始化一个空项目

1、新建一个文件夹，然后进入到该文件夹目录下，执行

npm init

初始化项目。然后会让你填一些项目相关的信息，跟着提示填就是了。没啥说的。注意name不要和现有的其他npm包重名了，不然一会儿发Npm包的时候会失败，可以先去npmjs.com搜一下有没有重名的。
这一步完成后，目录下会生成package.json文件。

2、由于本教程是发布一个vue的组件包，而且使用了es6和webpack，所以在devDependencies字段中，应该至少加入对应的依赖，可以参考我这个配置name 为npm包的名称，一定不能跟别人的重复，可以自己去npmjs.com 上面检查下是否重复，否则提交不成功的
main 自己定义的程序的入口文件，比如我希望打包后是 dist/helloWorld.js。private 要设置为 false

{
  "name": "hello-world",
  "description": "",
  "version": "1.0.0",
  "author": "十三月",
  "license": "MIT",
  "private": false,
  "main": "dist/helloWorld.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"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "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",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.12.0",
    "webpack-dev-server": ">=3.4.1"
  }
}

具体这些依赖都有什么用处自己查查就明白了。

3、执行npm install，下载这些依赖包。
4、项目根目录下创建2个文件夹：dist 和 src，名字按照个人习惯可以变动。我习惯使用dist代表发布的目录，src是开发目录。dist文件夹里的js是到时候通过webpack打包后的文件。待会只会提交dist目录到npm官网上，src不提交。

src里，我们创建一个常规的vue组件。hello-world.vue 内容大致如下：

<template>
  <div>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "hello-world",
    components: {},
    props: {
      name: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    destroyed() {
    }
  }
</script>

<style scoped>

</style>

接下来我们还需要创建一个js文件。index.js 内容如下（这里的写法主要是把这个组件 export 出去）：

import helloWorld from './hello-world.vue'
export default helloWorld;

5、接下来配置 webpack 打包，把src中的内容打包进 dist 目录内：
根目录下新增 webpack.config.js 大致内容如下：

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录
    publicPath: '/dist/',//路径

    filename: 'helloWorld.js',//打包之后的名称
    library: 'helloWorld', // 指定的就是你使用require时的模块名

    libraryTarget: 'umd', // 指定输出格式
    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|eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.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
    })
  ])
}

然后执行npm run build，就会在dist目录下生成helloWorld.js。这个js即是我们这个npm包的主文件。

6、新建一个文件，名为.npmignore，是不需要发布到npm的文件和文件夹，规则和.gitignore一样。如果你的项目底下有.gitignore但是没有.npmignore，那么会使用.gitignore里面的配置。大致可以参考我的.npmignore

.DS_Store
node_modules/
dist/
build/
npm-debug.log
yarn-error.log
package-lock.json

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

至此，一个npm组件包就做完了，剩下的，只是提交到npm官网去。

(如果要严谨点，当然还需要加入单元测试通过后再发包。。。但是。。。但是。。。
image

）

二、发布到NPM上的流程

1、前提，得有个npm账号，没有就新注册一个账号
https://www.npmjs.com/signup

2、进入到项目的根目录下，运行 npm login 执行登录
一般情况下回提示你输入 你的用户名，密码和邮箱，若登录成功一般会显示：

`Logged in as` 你的名字 `on https://registry.npmjs.org/`.

3、登录成功后就可以执行 npm publish 即可将这个npm包发布到npm官网。大概过个10来分钟就可以搜索到并下载，我们执行npm install hello-world --save-dev 即可在自己的项目中import导入进来当做组件使用了。
4、更新包的时候，需要手动修改 package.json 中的version版本号，一般惯例都是+1，比如1.0.0 --> 1.0.1。更改完成后，分别执行打包、登录npm、发布即可。

npm run build

npm login
npm publish

关于版本号和标签
npm包的版本号遵循着一定的规范，比如1.5.2这个版本号，其中1是主版本号(major version)，5是次版本号(minor version)，而 2是补丁版本号(patch version)，主要用来bug修复的更新等。在包管理的时候遵循对应语义的版本号更新，便于后续维护。

同时，在发布一个新版本的时候，还可以使用打标签的方式进行标记，如：

npm publish --tag beta
npm publish --tag bugfix

如果你的包是已经发布过了，还可以对指定的版本号进行打标签:

npm dist-tag add npm-test@1.0.0 [stable]

三、一般问题

1、发包时提示name名错误，name名称不能有大写字母，一般建议小写字母加中横线连接
2、【该条非转自上述链接，自行总结】：打包好的文件，不能直接放在src下引入哦！比如我将打包好的js叫做Helloword.js，放在和main.js同级，然后在main.js中引入，这种做法是无效的哦，会报undefined，亲测无效哦！ 从npm中引入可以的。 放在static下作为静态资源在html文件中引入<script>应该可以（未测试）
3、

四、我的第一个npm

该条非转自上述链接，自己的练习

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345