vue todo-list组件发布到npm上的方法


Posted in Javascript onApril 04, 2018

前言

最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例。案例源码:https://github.com/wuwhs/todoList

建立npm项目

1. 初始化npm项目

建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm init,前提是已经装好了node(自带npm)。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (todolist)

提示输入项目包名称,这里的名称将作为发布到npm上这个包的名称,以后别人使用就可以直接importrequire到项目中使用。

package name: (todolist) todolist
version: (1.0.0)

接下来提示输入版本,这里的版本将作为发布到npm上这个包版本控制号,每次发布必须要改一下版本号,才允许发布,在这里作为第一个版本可以直接回车,默认是1.0.0

version: (1.0.0)
description:

然后提示输入描述信息,描述一下这个包的功能作用。于是输入:

description: a vue component of todolist
entry point:(webpack.config.js)

再者,提示整个项目的入口文件,这里是我们打包后的文件,打包后文件都放到dist目录下,先设定生成的文件是todoList.min.js,于是:

entry point:(webpack.config.js) ./dist/todoList.min.js
test command:
git repository:

接下来提示输入测试命令、git仓库,先不管,后面再详细写,回车默认空。

再提示输入关键字,便于其他人在npm上搜索得到你写的包,最后就是作者和认证,根据自己实际情况填。

keywords: todolist vue
author: wuwhs
license: (ISC)
About to write to D:\WampServer\wamp\www\todoList\package.json:

{
 "name": "vue-todolist",
 "version": "1.0.0",
 "description": "a vue component of todolist",
 "main": "dist/todolist.min.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "todolist",
  "vue"
 ],
 "author": "wuwhs",
 "license": "ISC"
}

Is this ok? (yes) yes

这样,一个npm项目就初始化完了。接下来,来发布一个已经打包好了的组件包(先为空的)到npm上。

发布包到npm上

首先需要有npm官网的一个注册账号,然后输入npm adduser,依次输入npm登录账号、密码和注册激活邮箱。这样就轻松的登录上了。(PS:在window的CMD窗口,输入密码时不显示输入密码,盲输入,确定后回车即可,这里被坑了一下)

$ npm adduser
Username: wuwhs
Password: balabala...
Email: (this IS public) balabala...
Logged in as wuwhs on https://registry.npmjs.org/.

最后,直接输入指令publish即可大功告成。

$ npm publish
+ vue-todolist@1.0.0

vue todo-list组件发布到npm上的方法

不过,好事多磨,可能事情没有那么顺利。

一个可能取的包名称跟别人的重名了,这样是不能上传上去的,会提示你没有权限发布这个包。

$ npm publish
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "vue-router". Are you logged in as the correct user? : vue-router

npm ERR! A complete log of this run can be found in:
npm ERR!   C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-02T15_41_56_696Z-debug.log

解决方法:需要到package.json里改一下包名称name,或者去npm官网搜一下你要取的名称,有没有同名,再回头来改。

还有就是每次发布,没改版本号。

$ npm publish
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published versions: 1.0.1. : vue-todolist

npm ERR! A complete log of this run can be found in:
npm ERR!   C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-02T15_40_28_571Z-debug.log

解决方法:需要到package.json里改一下版本号后发布。

把npm线路打通了,接下来就是打包输出,上传资源了。

webpack打包

组件写好后,一般要借助自动化工具,将资源整合打包压缩,提供一个入口文件,供别人直接引用。在这里,选用webpack来打包。

为了方便演示,写一个vue官网上todo-list的例子,作为组件打包发布。

整个目录结构

--todoList
  --src
    --components
      --todoItem.vue
      --todoList.vue
    --App.vue
    --index.js
    --main.js
  --index.html
  --webpack.config.js
  --package.json
  --.babelrc
  --.npmignore

下面来分别说明文件内容:

1. package.json文件

{
 "name": "vue-todolist",
 "description": "a vue component of todolist",
 "version": "1.0.0",
 "author": "wuwhs",
 "license": "MIT",
 "private": false,
 "main": "./dist/todoList.min.js",
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "dependencies": {
  "vue": "^2.5.11"
 },
 "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
 ],
 "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",
  "vue-loader": "^13.0.5",
  "vue-template-compiler": "^2.4.4",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
 }
}

主要安装一些必要的依赖插件,如vue、babel和webpack

2. webpack.config.js文件

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

module.exports = {
 entry: './src/main.js',
 output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
 },
 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'
 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
  })
 ])
}

webpack的基本热更新以及打包配置,可以参考webpack中文官网

3. .babelrc文件

{
 "presets": [
  ["env", { "modules": false }],
  "stage-3"
 ]
}

ES6转化工具babel配置

4. main.js项目入口文件

import Vue from 'vue'
import App from './App.vue'

new Vue({
 el: '#app',
 render: h => h(App)
})

5. App.vue vue根组件

<template>
 <div id="app">
  Hello, todo-list!
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

6. index.html 页面

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

输入命令npm install,所有依赖包安装完成后,npm run dev,启动成功。

vue todo-list组件发布到npm上的方法

PS:遇到一个坑,先用npm install感觉太慢了,于是断掉了,用cnpm install,安装完成后,启动总是缺少这个依赖包,那个依赖包,没完没了,于是,把node_modules全删了,重新cnpm install一气呵成正常了。cnpm安装会引入一些版本文件,前面npm已装好的包没有,于是就出现了报错,找不到某某依赖包。

至此,打包工具webpack的基本配置就完成了,接下来就是写vue组件了。

写todo-list的vue组件

todo-list组件在很多地方都会作为一个案例使用,在这就直接模范vue官网的案例来写了。

1. todoList.vue组件——列表

<template>
<div">
 <input
  v-model="newTodoText"
  v-on:keyup.enter="addNewTodo"
  placeholder="Add a todo"
 >
 <ul>
  <li
   is="todo-item"
   v-for="(todo, index) in todos"
   v-bind:key="todo.id"
   v-bind:title="todo.title"
   v-on:remove="todos.splice(index, 1)"
  ></li>
 </ul>
</div>
</template>

<script>
import TodoItem from './TodoItem'
export default {
 components: {
  TodoItem
 },
 data () {
  return {
   newTodoText: '',
   todos: [
    {
     id: 1,
     title: 'Do the dishes',
    }
   ],
   nextTodoId: 2
  }
 },
 methods: {
  addNewTodo: function () {
   this.todos.push({
    id: this.nextTodoId++,
    title: this.newTodoText
   })
   this.newTodoText = ''
  }
 }
}
</script>

2. todoList.vue组件——列表项

减小耦合度,把列表项单独拿出来做一个组件。

<template>
<li>
 {{ title }}
 <button v-on:click="$emit('remove')">X</button>
</li>
</template>

<script>
export default {
 props: ['title']
}
</script>

3. App.vue根组件

将todo-list组件引入并挂载到根节点。

<template>
 <div id="app">
  <todo-list></todo-list>
 </div>
</template>

<script>
import TodoList from './components/todoList'
export default {
 name: 'app',
 components: {
  TodoList
 }
}
</script>

刷新浏览器,查看效果

vue todo-list组件发布到npm上的方法

OK,组件基本完成。

组件打包

前面已经验证了,我们写的todo-list组件没问题了,要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了,把测试案例用的main.js换成index.js文件。

独立组件入口文件 index.js

目的只是将要打包的组件引入。

import TodoList from './components/todoList.vue'

export default TodoList

更改webpack配置 webpack.config.js

将入口文件更换成./src/index.js,文件出口路径和名称更换成package.jsonmain的路径和名称,这样方便不调整npm的发布目录。

module.exports = {
 entry: './src/index.js',
 output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'todoList.min.js'
 },
 ...
}

改好后,npm run build,打包组件,结果就在dist目录下有了todoList.min.js文件。这就是打包组件后的文件。也是将要发布到npm上别人真正使用的入口文件。

测试打包好的文件

刚打包好的文件能不能直接使用,在发布到npm上之前先在本地测试一下。要测试方法很简单,就是把跟组件引入的vue组件改成引入刚打包的文件。于是App.vue这样改:

<script>
import TodoList from '../dist/todoList.min.js'
export default {
 name: 'app',
 components: {
  TodoList
 }
}
</script>

再改回测试案例入口,刷新浏览器,报错!

vue.esm.js?3153:591 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <TodoList>
    <App> at src\App.vue
     <Root>

有点小奔溃,没有渲染函数?难道自己打包出来的组件竟然不能用!后来查资料才知道,打包需要指定一种模块输出类型,可以是commonjs,AMD,script,UMD模式。在这里是写插件,要采用UMD模式,即libraryTarget: 'umd'。于是webpack.config.js出口文件配置修改为:

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'todoList.min.js',
  library: 'vueTodoList',
  libraryTarget: 'umd',
  umdNamedDefine: true
 }

再打包独立组件,更新todoList.min.js文件,改回测试文件(entry: './src/main.js',)入口,npm run dev,刷新浏览器,成功!

vue todo-list组件发布到npm上的方法

发布和使用npm组件包

发布npm组件包

已经验证了我们已经打包生成的todoList.min.js可以正常使用,接下来就可以发布到npm上了,同样npm跟git一样,可以使用.npmignore忽略一些上传文件,比如node_moudules就不要上传上去了。

.DS_Store
node_modules/
npm-debug.log
yarn-error.log

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

更改一下package.jsonversion,执行npm publish即可

$ npm publish
+ vue-todolist@1.0.3

使用npm组件包

发布成功后,这就是一个平常使用的插件了,cnpm install vue-todolist --save即可安装(使用npm或cnpm安装均可)完成,

$ cnpm install vue-todolist --save
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
Recently updated (since 2018-03-27): 1 packages (detail see file D:\appSoft\wampserver\wamp64\www\todoList\node_modules\.recently_updates.txt)
 Today:
  → vue-todolist@*(1.0.3) (11:15:22)
√ All packages installed (1 packages installed from npm registry, used 564ms, speed 528.68kB/s, json 2(281.56kB), tarball 16.62kB)

然后直接在页面中引入使用。

在App.vue引入todolist组件,就不需要引入本地写的了,直接引入刚才安装好的

<script>
import TodoList from 'vue-todolist'
export default {
 name: 'app',
 components: {
  TodoList
 }
}
</script>

再次运行npm run dev,刷新浏览器,一切正常,good。

总结

至此,打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注:

  1. npm包配置(package.json)中,提供对外使用的入口文件最好跟打包后的文件一致,这样打包完成后就可直接测试和发布;
  2. 每次发布要改版本号;
  3. webpack配置文件出口要加库输出类型libraryTarget: 'umd';
  4. 最好单独用一个文件作为组件输出打包,不要跟测试案例入口文件弄混;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
RequireJS使用注意细节
May 15 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
js判断密码强度的方法
Mar 18 Javascript
js实现网页随机验证码
Oct 19 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
vue cli升级webapck4总结
Apr 04 #Javascript
JavaScript实现短暂提示框功能
Apr 04 #Javascript
Vue filter介绍及详细使用
Apr 04 #Javascript
You might like
php入门教程 精简版
2009/12/13 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
大二自我鉴定范文
2013/10/05 职场文书
计算机本科生自荐信
2013/10/15 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
学生安全教育材料
2014/02/14 职场文书
四群教育工作实施方案
2014/03/26 职场文书
校园安全演讲稿
2014/05/09 职场文书
法院授权委托书格式
2014/09/28 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
婚庆主持词大全
2015/06/30 职场文书
电台广播稿范文
2015/08/19 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python