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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
javascript数组详解
2014/10/22 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python使用filetype精确判断文件类型
2017/07/02 Python
用matplotlib画等高线图详解
2017/12/14 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
总结Python常用的魔法方法
2021/05/25 Python