认识rolloup
根据官网的介绍，rollup是一个用于打包代码的库，其作用类似于webpack。但优势是配置非常简洁，可以方便的按不同的打包格式将代码打包。在开发组件库的时候用rollup进行打包非常的方便。
- 全局安装rolllup
npm install --global rollup - 尝试用rollup打包文件
新建一个工程目录，然后在项目里新建两个文件lib.js和index.js
// lib.js
function test() {
console.log("test")
}
export default test
// index.js
import test from './lib'
console.log(test());
然后执行指令
rollup index.js --file bundle.js --format es
可以看到打包后的bundle.js.
解释一下，这里的index.js是需要打包的入口文件，bundle.js是要打包后生成的文件。
而es是指定某种打包格式。
构建rollup配置文件
上面我们进行了用rollup指令进行非常简单的文件打包。但在真正的开发环境中，我们需要创建一个类似与webpack.config.js的文件来对我们的rollup进行配置，指定输入输出等。
- 构建文件目录
在工程目录中，依次创建下面三个文件夹
build // 放置rollup.config.js配置文件
dist // 打包后的生成目录
src // 源文件目录
然后我们在build文件夹中创建文件rollup.config.js
// rollup.config.js
export default {
input: 'index.js',
output: {
format: 'esm',
file: 'dist/MyComponent.js'
}
}
这个文件表明了我们的入口文件以及出口文件。
然后我们可以通过执行命令
rollup -c dist/rollup.config.js进行打包。
在rollup.config.js中有很多项可以配置，具体可以参考官网https://rollupjs.org/guide/en#configuration-files
打包vue文件
打包vue文件，我们需要rollup-plugin-commonjs和rollup-plugin-vue两个官方提供的库。
我们首先要引入这两个库。
执行npm init然后填入基本信息后一直下一步。
该操作将会创建一个package.json文件。
然后安装两个库
npm install rollup-plugin-vue --save
npm install rollup-plugin-commonjs --save
之后我们修改rollup.config.js配置文件
import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'index.js',
output: {
format: 'esm',
file: 'dist/MyComponent.js'
},
plugins: [
commonjs(),
vue(),
]
}
然后我们可以尝试一下，在工程目录下新建一个vue文件my-comp.vue
<template>
<div>
this is a my comp
</div>
</template>
<script>
export default {
name: "my-component"
}
</script>
<style scoped>
</style>
然后修改rollup.config.js的入口文件.
import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'my-comp.vue',
...
}
此时执行rollup -c build/rollup.config.js
发现报错
Error: Cannot find module 'vue-template-compiler'
Error: Cannot find module 'vue-template-compiler'
执行npm install vue-template-compiler --save-dev后再进行打包便不会再报错。
将vue文件注册为全局组件
一般我们构建组件库的方式是通过将vue组件注册成全局组件，然后再引入该库后通过在main.js添加vue.use(***)来进行引入并使用。
接下来我们将我们的组件注册成全局组件并导出。
首先，我们删除多余的文件bundle.js和lib.js。
之后，我们将my-comp.vue移动到src文件夹中，并在src文件夹中新建index.js
import MyComponent from './my-component.vue'
const MyComp = {
install: function(Vue){
Vue.component('MyComponent', MyComponent)
}
}
// 导出组件
export default MyComp
然后我们在rollup.config.js将入口文件改为index.js即可。
将vue组件发布到npm社区
首先，替换npm源为官方源，如果之前没有更换为淘宝源的不需要进行这步。
npm config set registry https://registry.npmjs.org/
然后，需要到npm官方网站注册个账号。
https://www.npmjs.com/
之后回到我们的工程目录，执行
npm login
输入我们注册的npm账号密码和邮箱。
到这里，我们已经相当于在命令行中登录到npm官网中。
下面我们需要进行几步操作。
完善基本信息
package.json的以下字段需要注意
nameversiondescriptionkeywordsauthorlicenserepositorymainunpkgmodulescriptsengines
name就是发布到npm上的包名，也即别人安装时输入的名字yarn add ${name}, 包名应该是kebab-case, 即英文单词全小写，中划线分割(lower case and dash-separated)
version是语义化的，major.minor.patch. 如果是major变动，通常意味着不兼容的修改; 如果是minor，意味着添加向后兼容的新功能，如果是patch, 意味着bug的修复。详情见semver.org
description是对包的描述，在npmjs.com上搜索时会显示，有助于用户在搜索时进行筛选
keywords 同样也是帮助用户查找到你的包
author的格式一般是${your name} ${email}, 当然也可以是一个github地址
license可能很多人会忽略，最好也写上去。至于用哪个，vue的官方项目全是MIT，因此我也是MIT，不纠结
repository的格式参考如下：
"repository": {
"type": "git",
"url": "https://github.com/FEMessage/el-data-table.git"
}
这样在npm包页面就有会个github的入口.
main定义了包的入口文件，在NodeJs环境，语句import pkg from 'package-name'时，其实导入的就是main定义的文件，它可以是CommonJs格式的, 也可以是umd格式
需要注意的是，当你把一个包发布到npm上时，它同时也可以在unpkg上获取到。也就是说，你的代码既可能在NodeJs环境也可能浏览器环境执行。为此你需要用umd格式打包，并且在package.json定义unpkg字段，一般而言此时它的命名为name.min.js
最后，别忘了定义module或jsnext:main字段，它表示用ES6模块格式打包，给Webpack 2+或Rollup等先进的构建工具来处理。
我们来看一下三个字段的示例：
"main": "dist/el-data-table.js",
"unpkg": "dist/el-data-table.min.js",
"module": "dist/el-data-table.esm.js"复制代码
scripts 为了防止出现发包前忘记构建的乌龙事件，定义一下发布前的脚本, 这样每次执行npm publish前都会先执行npm run build
"prepublishOnly": "npm run build"复制代码
engines 可以告诉用户运行你的包对NodeJs版本的要求，这是非常重要的，不然你使用了NodeJs新版本特性，却没有定义该字段，导致低版本NodeJs用户运行报错，让人摸不着头脑。
定义依赖
当你开发一个项目时，比如一个静态网站或一个单面应用，dependencies和devDependencies并没有太多区别，因为你npm install 或 yarn时，这些依赖都会下载下来，因为你是在开发。
但对于发布到npm的包则不同：
dependencies 是运行你的包必须安装的依赖，即当用户yarn add my-awesome-package时，这些依赖也会下载。
devDependencies 是开发你的包时需要安装的依赖，比如eslint, jest等开发工具，当用户yarn add my-awesome-package 时，这些依赖并不会下载！
peerDependencies 一般用于开发插件的场景，它要求用户必须预先安装了某些依赖。比如开发webpack的插件，如果你把对webpack的依赖定义成dependencies, 如果用户安装的webpack跟dependencies里的minor版本不一致, 则用户yarn add my-webpack-plugin时会把dependencies定义的webpack也下载下来，也即用户会安装两个major版本相同的webpack, 这就不合适了。
忽略文件
如果有.gitignore文件，则发布时会忽略.gitignore中定义的文件; 也即这些文件不需要在.npmignore重新定义。如果用.gitignore忽略了dist目录，但发包时又需要发布dist目录，此时可以在package.json定义files字段，这是一个白名单，里面的文件都会被发布出去
"files": [
"dist"
]
需要注意的是，子文件夹.gitignore或.npmignore同样有效，而它们会覆盖files字段
另外，有些文件无论如何设置，都不会发布出去：
node_modules
.git(包括.gitignore)
最后
在一切准备就绪后，执行npm publish，如果没有报错，那么恭喜你，你已经发布成功了。
可以在npm官网搜索下你的包了！
如果报错的话，用管理员权限执行试试~
网友评论