Vue源碼之rollup環(huán)境搭建步驟詳解
搭建環(huán)境
第一步
進行初始化,在終端輸入npm init -y生成package.json文件,可以記住所有開發(fā)相關的依賴。
第二步
--在終端輸,入安裝依賴 npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev
注:
安裝rollup打包工具,可能需要編譯高級語法所以需要安裝babel,安裝babel需要在rollup中使用,所以安裝一個rollup-plugin-babel表示在rollup中使用babel插件,用babel需要安裝babel的核心插件@babel/core,又因為把高級語法轉為低級語法所以還需要安裝一些預設,安裝一個插件@babel/preset-env,為開發(fā)依賴--save-dev,所以執(zhí)行上面的命令
建立rollup配置文件
在根目錄創(chuàng)建一個rpllup.config.js文件,配置完成之后就可以通過rollup進行打包,在package.json中就可以配置一段腳本
"scripts": {
// 用rollup來打包,執(zhí)行rpllup.config.js,-c指定配置文件 -w監(jiān)控文件變化
"dev": "rollup -cw"
},
創(chuàng)建入口文件
創(chuàng)建一個src目錄,在目錄下新建一個index.js入口文件
// index.js export const number = 1
打包前準備
// rpllup.config.js
// rollup默認可以導出一個對象,作為打包的配置文件
import babel from 'rollup-plugin-babel'
export default {
input:'./src/index.js', // 入口
output:{
file:'./dist/vue.js', // 出口
name:'Vue', // global.Vue
format:'umd', //打包格式: esm es6模塊 commnjs模塊 iife自執(zhí)行函數(shù) umd統(tǒng)一模塊規(guī)范 umd兼容(commnjs模塊 iife自執(zhí)行函數(shù))
sourcemap:true, // 希望可以調試源代碼
},
plugins:[
//babel一般會建立一個單獨的配置文件.babelrc
babel({
exclude:'node_modules/**' // 排除mode_modules所有文件,不需要打包這些文件
})
]
}
//.babelrc
// preset 預設也就是插件集合
{
"presets": [
"@babel/preset-env"
]
}
打包
執(zhí)行npm run dev執(zhí)行成功后根目錄下會增加一個dist目錄,目錄中會生成一個vue.js文件和vue.js.map文件
//vue.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Vue = {}));
})(this, (function (exports) { 'use strict';
var number = 1;
exports.number = number;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=vue.js.map
測試一下
在dist目錄中新建一個index.html,引入index.js,console.log()打印一下Vue
<script src="vue.js"></script>
<script>
console.log(Vue); // {number: 1}
</script>
以上就是Vue源碼之rollup環(huán)境搭建步驟詳解的詳細內容,更多關于Vue rollup環(huán)境搭建的資料請關注腳本之家其它相關文章!
相關文章
解決vue中修改export default中腳本報一大堆錯的問題
今天小編就為大家分享一篇解決vue中修改export default中腳本報一大堆錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關于vue-lunar-full-calendar的使用說明
這篇文章主要介紹了關于vue-lunar-full-calendar的使用說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07

