認(rèn)識(shí)rolloup

根據(jù)官網(wǎng)的介紹，rollup是一個(gè)用于打包代碼的庫(kù)嫌变，其作用類(lèi)似于webpack。但優(yōu)勢(shì)是配置非常簡(jiǎn)潔躬它，可以方便的按不同的打包格式將代碼打包腾啥。在開(kāi)發(fā)組件庫(kù)的時(shí)候用rollup進(jìn)行打包非常的方便。

• 全局安裝rolllup
  npm install --global rollup
• 嘗試用rollup打包文件
  新建一個(gè)工程目錄冯吓，然后在項(xiàng)目里新建兩個(gè)文件lib.js和index.js

// lib.js
function test() {
    console.log("test")
}

export default test

// index.js
import test from './lib'

console.log(test());

然后執(zhí)行指令
rollup index.js --file bundle.js --format es
可以看到打包后的bundle.js.
解釋一下倘待，這里的index.js是需要打包的入口文件，bundle.js是要打包后生成的文件组贺。
而es是指定某種打包格式凸舵。

構(gòu)建rollup配置文件

上面我們進(jìn)行了用rollup指令進(jìn)行非常簡(jiǎn)單的文件打包。但在真正的開(kāi)發(fā)環(huán)境中失尖，我們需要?jiǎng)?chuàng)建一個(gè)類(lèi)似與webpack.config.js的文件來(lái)對(duì)我們的rollup進(jìn)行配置啊奄，指定輸入輸出等。

• 構(gòu)建文件目錄
  在工程目錄中掀潮，依次創(chuàng)建下面三個(gè)文件夾

build  // 放置rollup.config.js配置文件
dist  // 打包后的生成目錄
src  // 源文件目錄

然后我們?cè)赽uild文件夾中創(chuàng)建文件rollup.config.js

// rollup.config.js
export default {
    input: 'index.js',
    output: {
        format: 'esm',
        file: 'dist/MyComponent.js'
    }
}

這個(gè)文件表明了我們的入口文件以及出口文件菇夸。
然后我們可以通過(guò)執(zhí)行命令
rollup -c dist/rollup.config.js進(jìn)行打包。
在rollup.config.js中有很多項(xiàng)可以配置胧辽，具體可以參考官網(wǎng)https://rollupjs.org/guide/en#configuration-files

打包vue文件

打包vue文件峻仇，我們需要rollup-plugin-commonjs和rollup-plugin-vue兩個(gè)官方提供的庫(kù)。
我們首先要引入這兩個(gè)庫(kù)邑商。
執(zhí)行npm init然后填入基本信息后一直下一步摄咆。
該操作將會(huì)創(chuàng)建一個(gè)package.json文件。
然后安裝兩個(gè)庫(kù)
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(),
    ]
}

然后我們可以嘗試一下人断，在工程目錄下新建一個(gè)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',
    ...
}

此時(shí)執(zhí)行rollup -c build/rollup.config.js
發(fā)現(xiàn)報(bào)錯(cuò)

Error: Cannot find module 'vue-template-compiler'
Error: Cannot find module 'vue-template-compiler'

執(zhí)行npm install vue-template-compiler --save-dev后再進(jìn)行打包便不會(huì)再報(bào)錯(cuò)吭从。

將vue文件注冊(cè)為全局組件

一般我們構(gòu)建組件庫(kù)的方式是通過(guò)將vue組件注冊(cè)成全局組件，然后再引入該庫(kù)后通過(guò)在main.js添加vue.use(***)來(lái)進(jìn)行引入并使用恶迈。
接下來(lái)我們將我們的組件注冊(cè)成全局組件并導(dǎo)出涩金。
首先谱醇，我們刪除多余的文件bundle.js和lib.js。
之后步做，我們將my-comp.vue移動(dòng)到src文件夾中副渴，并在src文件夾中新建index.js

import MyComponent from './my-component.vue'


const MyComp = {
    install: function(Vue){
        Vue.component('MyComponent', MyComponent)
    }
}
// 導(dǎo)出組件
export default MyComp

然后我們?cè)?code>rollup.config.js將入口文件改為index.js即可。

將vue組件發(fā)布到npm社區(qū)

首先全度，替換npm源為官方源煮剧，如果之前沒(méi)有更換為淘寶源的不需要進(jìn)行這步。
npm config set registry https://registry.npmjs.org/
然后将鸵，需要到npm官方網(wǎng)站注冊(cè)個(gè)賬號(hào)勉盅。
https://www.npmjs.com/
之后回到我們的工程目錄，執(zhí)行
npm login
輸入我們注冊(cè)的npm賬號(hào)密碼和郵箱顶掉。
到這里草娜，我們已經(jīng)相當(dāng)于在命令行中登錄到npm官網(wǎng)中。

下面我們需要進(jìn)行幾步操作痒筒。

完善基本信息

package.json的以下字段需要注意

• name
• version
• description
• keywords
• author
• license
• repository
• main
• unpkg
• module
• scripts
• engines

name就是發(fā)布到npm上的包名宰闰，也即別人安裝時(shí)輸入的名字yarn add ${name}, 包名應(yīng)該是kebab-case, 即英文單詞全小寫(xiě)，中劃線(xiàn)分割(lower case and dash-separated)

version是語(yǔ)義化的凸克，major.minor.patch. 如果是major變動(dòng)议蟆，通常意味著不兼容的修改; 如果是minor，意味著添加向后兼容的新功能萎战，如果是patch, 意味著bug的修復(fù)咐容。詳情見(jiàn)semver.org

description是對(duì)包的描述，在npmjs.com上搜索時(shí)會(huì)顯示蚂维，有助于用戶(hù)在搜索時(shí)進(jìn)行篩選

keywords 同樣也是幫助用戶(hù)查找到你的包

author的格式一般是${your name} ${email}, 當(dāng)然也可以是一個(gè)github地址

license可能很多人會(huì)忽略戳粒，最好也寫(xiě)上去。至于用哪個(gè)虫啥，vue的官方項(xiàng)目全是MIT蔚约，因此我也是MIT，不糾結(jié)

repository的格式參考如下：

"repository": {
  "type": "git",
  "url": "https://github.com/FEMessage/el-data-table.git"
}

這樣在npm包頁(yè)面就有會(huì)個(gè)github的入口.
main定義了包的入口文件涂籽，在NodeJs環(huán)境苹祟，語(yǔ)句import pkg from 'package-name'時(shí)，其實(shí)導(dǎo)入的就是main定義的文件评雌，它可以是CommonJs格式的, 也可以是umd格式

需要注意的是树枫，當(dāng)你把一個(gè)包發(fā)布到npm上時(shí)，它同時(shí)也可以在unpkg上獲取到景东。也就是說(shuō)砂轻，你的代碼既可能在NodeJs環(huán)境也可能瀏覽器環(huán)境執(zhí)行。為此你需要用umd格式打包斤吐，并且在package.json定義unpkg字段搔涝，一般而言此時(shí)它的命名為name.min.js

最后厨喂，別忘了定義module或jsnext:main字段，它表示用ES6模塊格式打包庄呈，給Webpack 2+或Rollup等先進(jìn)的構(gòu)建工具來(lái)處理蜕煌。

我們來(lái)看一下三個(gè)字段的示例：

"main": "dist/el-data-table.js",
"unpkg": "dist/el-data-table.min.js",
"module": "dist/el-data-table.esm.js"復(fù)制代碼

scripts 為了防止出現(xiàn)發(fā)包前忘記構(gòu)建的烏龍事件，定義一下發(fā)布前的腳本, 這樣每次執(zhí)行npm publish前都會(huì)先執(zhí)行npm run build

"prepublishOnly": "npm run build"復(fù)制代碼

engines 可以告訴用戶(hù)運(yùn)行你的包對(duì)NodeJs版本的要求抒痒，這是非常重要的幌绍，不然你使用了NodeJs新版本特性，卻沒(méi)有定義該字段故响，導(dǎo)致低版本NodeJs用戶(hù)運(yùn)行報(bào)錯(cuò)，讓人摸不著頭腦颁独。

定義依賴(lài)

當(dāng)你開(kāi)發(fā)一個(gè)項(xiàng)目時(shí)彩届，比如一個(gè)靜態(tài)網(wǎng)站或一個(gè)單面應(yīng)用，dependencies和devDependencies并沒(méi)有太多區(qū)別誓酒，因?yàn)槟?code>npm install 或 yarn時(shí)樟蠕，這些依賴(lài)都會(huì)下載下來(lái)，因?yàn)槟闶窃陂_(kāi)發(fā)靠柑。
但對(duì)于發(fā)布到npm的包則不同：
dependencies 是運(yùn)行你的包必須安裝的依賴(lài)寨辩，即當(dāng)用戶(hù)yarn add my-awesome-package時(shí)，這些依賴(lài)也會(huì)下載歼冰。
devDependencies 是開(kāi)發(fā)你的包時(shí)需要安裝的依賴(lài)靡狞，比如eslint, jest等開(kāi)發(fā)工具，當(dāng)用戶(hù)yarn add my-awesome-package 時(shí)隔嫡，這些依賴(lài)并不會(huì)下載甸怕！
peerDependencies 一般用于開(kāi)發(fā)插件的場(chǎng)景，它要求用戶(hù)必須預(yù)先安裝了某些依賴(lài)腮恩。比如開(kāi)發(fā)webpack的插件梢杭，如果你把對(duì)webpack的依賴(lài)定義成dependencies, 如果用戶(hù)安裝的webpack跟dependencies里的minor版本不一致, 則用戶(hù)yarn add my-webpack-plugin時(shí)會(huì)把dependencies定義的webpack也下載下來(lái)，也即用戶(hù)會(huì)安裝兩個(gè)major版本相同的webpack, 這就不合適了秸滴。

忽略文件

如果有.gitignore文件武契，則發(fā)布時(shí)會(huì)忽略.gitignore中定義的文件; 也即這些文件不需要在.npmignore重新定義。如果用.gitignore忽略了dist目錄荡含，但發(fā)包時(shí)又需要發(fā)布dist目錄咒唆，此時(shí)可以在package.json定義files字段，這是一個(gè)白名單内颗，里面的文件都會(huì)被發(fā)布出去

"files": [
  "dist"
]

需要注意的是钧排，子文件夾.gitignore或.npmignore同樣有效，而它們會(huì)覆蓋files字段

另外均澳，有些文件無(wú)論如何設(shè)置恨溜，都不會(huì)發(fā)布出去：
node_modules
.git(包括.gitignore)

最后

在一切準(zhǔn)備就緒后符衔，執(zhí)行npm publish，如果沒(méi)有報(bào)錯(cuò)糟袁，那么恭喜你判族，你已經(jīng)發(fā)布成功了。
可以在npm官網(wǎng)搜索下你的包了项戴！
如果報(bào)錯(cuò)的話(huà)形帮，用管理員權(quán)限執(zhí)行試試~

部分內(nèi)容參考鏈接：https://juejin.im/post/5b231f6ff265da595f0d2540