Vue rollup环境搭建

时间:2022-09-29 i东东人气:0

搭建环境

第一步

进行初始化,在终端输入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>

加载全部内容