1 Rollup 是什么 堤尾？
Rollup 是一個(gè) JavaScript 模塊打包器最盅，可以將小塊代碼編譯成大塊復(fù)雜的代碼 榜跌。有人會(huì)說(shuō)了 那為什么不選擇webpack 呢 损搬？ 它更強(qiáng)大 碧库。 其實(shí)我們接下來(lái)的文檔是寫(xiě) js 庫(kù)的（vue） ，用webpack大笨重了 巧勤，所以選擇更輕量級(jí)的 rollup.js 嵌灰。
2 新建項(xiàng)目文件夾 （2020-vue）
終端進(jìn)入項(xiàng)目文件夾
cd 2020-vue
cnpm init // 初始化項(xiàng)目
接下來(lái)我們只需要一路回車 ， 最后 yes 下就可以了颅悉。
Tip：這是我們項(xiàng)目里 就多了一個(gè) package.json 配置文件沽瞭。
下面我們就安裝 我們項(xiàng)目需要的配置及插件了
cnpm install rollup rollup-plugin-babel @babel/core @babel/preset-env rollup-plugin-serve -D
Tip：根目錄新建一個(gè) rollup.config.js 配置文件，配置如下：
import babel from 'rollup-plugin-babel' // 導(dǎo)入babel插件
import serve from 'rollup-plugin-serve' // 導(dǎo)入serve服務(wù)插件
export default {
input: './src/index.js', // 入庫(kù)文件
output: {
format: 'umd', // 模塊化類型
name: 'Vue', // 全局變量的名字
file: 'dist/umd/vue.js', // 打包后的路徑
sourcemap: true
},
plugins: [
babel({
exclude: 'node_modules/**' // 該目錄不轉(zhuǎn)譯
}),
serve({
// 打開(kāi)瀏覽器 啟動(dòng)服務(wù)
port: 3000,
contentBase: '',
openPage: '/index.html'
})
]
}
Tip： 新建 .babelrc 文件 签舞，把ES6轉(zhuǎn)譯為ES5 秕脓，代碼如下：
{
"presets": [
"@babel/preset-env"
]
}
Tip：還需要新建一個(gè) src/index.js 入口文件, 測(cè)試下 es6 是否轉(zhuǎn)譯為es5,代碼如下：
export const fn = () => {}
接著我們要用 rollup 進(jìn)行打包，需要配置個(gè)腳本儒搭。
打開(kāi) package.json 配置如下：
"scripts": {
"dev": "rollup -c -w"
},
這也我們就可以進(jìn)行打包了
npm run dev
這是我們的文件目錄為：
我們之前寫(xiě)的 ES6 代碼也轉(zhuǎn)為ES5 了吠架。
#文章最后我們來(lái)打印測(cè)試下 index.html 引入下vue.js 文件 ,打印下 Vue 。
結(jié)果如下圖所示：
到這里就 已經(jīng)打印我們之前寫(xiě)的測(cè)試方法了 搂鲫。
下一篇： 2. Vue 初始化流程 , 更多請(qǐng)關(guān)注：2020 - Vue 源碼解析與實(shí)現(xiàn)
