Vue源码之rollup环境搭建步骤详解

目录
  • 搭建环境
  • 建立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环境搭建的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

    Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装: 全局webpack: npm install webpack -g vue脚手架vue-cli: npm install vue-cli -g 安装webp

  • Vue环境搭建+VSCode+Win10的详细教程

    一.安装Node.js(js的运行环境) 1.在Node.js官网https://nodejs.org/en/download/ 下载安装包. 2.下载后进行安装. 3.打开命令行,输入node -v可以查看到版本号.输入npm –v可看到npm版本号. 新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装.(将来要更新npm可用这个命令npm intall npm@latest -g) 4.在我的win10系统中可以看到环境变量也已经自动配置好

  • vue3 Vite 进阶rollup命令行使用详解

    目录 rollup介绍 以命令行方式打包 Tree Shaking Rollup 的命令行使用 命令行 format 格式 rollup.config.js 设置/获取环境变量 插件 plugins rollup介绍 开源类库优先选择 以 ESM 标准为目标的构建工具 Tree Shaking 以命令行方式打包 安装 rollup npm install -g rollup 创建 index.js 文件 import path from "path"; console.log(&quo

  • vue项目环境搭建

    一.node.js下载和安装 官网下载安装nodejs,会自动捆绑安装npm,具体步骤省略. 二.express 安装 npm install express -g npm install -g express-generator -----g在前不会安装到全局(坑) npm install express-generator -g 全局安装 三.安装教脚手架 3.1 安装或更新全局vue npm install vue -g 3.2 安装或更新全局路由: npm install vue-rou

  • Vue新手指南之环境搭建及入门

    Vue新手指南之环境搭建及入门

    目录 初始Vue 搭建Vue开发环境 创建Vue实例 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 总结 Vue官网:https://cn.vuejs.org 初始Vue 什么是Vue? 一套用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用 简单应用:只需要一个轻量小巧的核心库 复杂使用:可以引入各式各样的Vue插件 Vue的特点: 1.组件化模式,提高代码复用率,更好维护代码 2.声明式编码:无需直接操

  • Vue项目环境搭建详细总结

    Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • Vue源码之rollup环境搭建步骤详解

    目录 搭建环境 建立rollup配置文件 创建入口文件 打包前准备 打包 测试一下 搭建环境 第一步 进行初始化,在终端输入npm init -y生成package.json文件,可以记住所有开发相关的依赖. 第二步 --在终端输,入安装依赖 npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev 注: 安装rollup打包工具,可能需要编译高级语法所以需要安装babel,安装babel需要在

  • centos源码编译php5 mcrypt模块步骤详解

    步骤:1.从php.net上面下载php5.3.x版本的源码; 2.centos安装相应的扩展包: 复制代码 代码如下: yum install libmcrypt libmcrypt-devel mcrypt mhash 下面的开发环境是为了编译整个php源码准备的环境,此次编译mcrypt扩展不需要执行. 复制代码 代码如下: yum install -y httpd-devel libtool-ltdl libtool-ltdl-devel openssl-devel curl-devel

  • Ubuntu 17.04系统下源码编译安装opencv的步骤详解

    Ubuntu 17.04系统下源码编译安装opencv的步骤详解

    前言 本文主要针对Ubuntu 17.04版本下,opencv进行源码编译安装.开发环境主要针对python 对 openCV库的调用.下面话不多说了,来一起看看详细的介绍: 一.安装 gcc cmake 编译环境 sudo apt-get install build-essential pkg-config cmake cmake-gui 本文提供两种源码编译方式,一种是cmake命令,另一种是通过图形界面的cmake-gui进行编译 该版本系统ubuntu已经自带python 2.7 和 p

  • python+webdriver自动化环境搭建步骤详解

    python是一个很好脚本语言工具,现在也比较流行的一个脚本语言工具,对目前web自动化可以用的比较是webdriver框架进行自动化测试,脚本写起来较简单,运行的占用的内容较小.那么对windown下python+webdriver自动化环境如何进行搭建. 下载一个python.exe文件,直接默认安装即可 配置python的环境,指定到python的路径 安装pip环境,从网上下载一个pip,解压完成后,进入解压目录下执行python setup install 安装selenium文件,在

  • IntelliJ IDEA基于SpringBoot如何搭建SSM开发环境的步骤详解

    之前给大家在博文中讲过如何通过eclipse快速搭建SSM开发环境,但相对而言还是有些麻烦的,今天玄武老师给大家介绍下如何使用IntelliJ IDEA基于SpringBoot来更快速地搭建SSM开发环境,相比于传统搭建方式,极少的配置文件和配置信息会让你彻底爱上它. 环境搭建步骤详解 第1步:创建Spring Initializr项目 在IntelliJ IDEA中新建项目,选择Spring Initializr,JDK版本选择自己安装的版本(首次使用可能显示没有,那么就点击New去按照步骤创

  • Eureka源码阅读之环境搭建及工程结构

    Eureka源码阅读之环境搭建及工程结构

    目录 1. 源码阅读环境搭建 1.1 源码下载: 2. 工程结构速览 3. 调试须知 1. 源码阅读环境搭建 ide:IntelliJ IDEA 2020.1 包管理:gradle eureka版本:1.10.11 Spring Cloud : 2020.0.2 Spring Boot :2.4.4 1.1 源码下载: 下载完源码之后,需要更改一下几个地方: build.gradle增加阿里云镜像仓库,将如下插件版本改一下,否则导入idea会报错: maven { url 'https://ma

  • Vue 2源码阅读 Provide Inject 依赖注入详解

    目录 Provide/Inject 初始化 1. initInjections 依赖初始化 2. initProvide 注入数据初始化 总结 Provide/Inject 初始化 1. initInjections 依赖初始化 该步骤其实发生在 initState 之前,但是由于 provide/inject 一般是配合使用,所以这里调整了一下顺序. 该函数的定义与过程都比较简单: export function initInjections(vm: Component) { const re

  • VSCode 搭建 Arm 远程调试环境的步骤详解

    简介 前提条件: 确保本机已经安装 VS Code. 确保本机已安装 SSH client, 并且确保远程主机已安装 SSH server. VSCode 已经安装了插件 C/C++. 本次搭建的环境: 主机:windows 10 服务器:ubuntu 16.04 VSCode 版本:February 2020 (version 1.43) Arm:海思 3559A (已配置好编译工具链和 gdb server) 连接远程主机 Remote Development 首先安装 Remote Dev

  • Electron整合React使用搭建开发环境的步骤详解

    简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const

  • 内网环境下registry搭建步骤详解

    目录 背景 docker环境 配置http可访问 重新加载docker 启动registry 启动registry-web 背景 在实际的开发运维过程中,经常需要使用镜像仓库的情况,虽然阿里云.腾讯云等都提供了带有免费额度的镜像仓库服务,但是由于账号等问题,我们还是需要自己搭建一个镜像仓库服务,供内网环境下使用. 大致的步骤: 准备docker环境 配置非http访问( Insecure Registries) 重新家在docker 启动registry 启动registry-web docke

随机推荐