Vue源码之rollup环境搭建步骤详解
作者:i东东
这篇文章主要介绍了Vue源码之rollup环境搭建步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
搭建环境
第一步
进行初始化,在终端输入npm init -y
生成package.json文件,可以记住所有开发相关的依赖。
第二步
--在终端输,入安装依赖 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
,为开发依赖--save-dev
,所以执行上面的命令
建立rollup配置文件
在根目录创建一个rpllup.config.js
文件,配置完成之后就可以通过rollup进行打包,在package.json中就可以配置一段脚本
"scripts": { // 用rollup来打包,执行rpllup.config.js,-c指定配置文件 -w监控文件变化 "dev": "rollup -cw" },
创建入口文件
创建一个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自执行函数 umd统一模块规范 umd兼容(commnjs模块 iife自执行函数) sourcemap:true, // 希望可以调试源代码 }, plugins:[ //babel一般会建立一个单独的配置文件.babelrc babel({ exclude:'node_modules/**' // 排除mode_modules所有文件,不需要打包这些文件 }) ] }
//.babelrc // preset 预设也就是插件集合 { "presets": [ "@babel/preset-env" ] }
打包
执行npm run dev
执行成功后根目录下会增加一个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环境搭建步骤详解的详细内容,更多关于Vue rollup环境搭建的资料请关注脚本之家其它相关文章!