Rollup开发环境的搭建（vue）
前言：
webpack 是目前最为流行的前端构建工具。同时在前端工程化中，Webpack在开发/编译/构建中都起到了最关键的作用。所以在当下阶段，webpack的基本配置，是每一个前端程序员应当掌握的基本技能。
webpack 虽然非常火热，但后起之秀 rollup 却慢慢地蚕食着 webpack 的市场,但是为什么还要用rollup呢？如果我们只是写一个 JavaScript 工具或者库，并不需要打包 image、css，也不需要代码拆分等特性，使用 webpack 未免太过繁琐；这时使用 rollup 就非常适合。
rollup简介：
rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码,打包模块过程中，通过Tree-shaking的方式，利用ES6模块能够静态分析语法树的特性，剔除各模块中最终未被引用到的方法，通过仅保留被调用到的代码块来减小bundle文件大小。（开发应用时使用Wwebpack，开发库时使用Rollup）
一.初始化
1.新建文件夹，在该文件夹下打开cmd
$ npm init -y 初始化项目
操作完成会生成package.json文件，这里面的配置我就不介绍了...
2.安装依赖,一系列的依赖
$ npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D
二.配置文件
1.新建rollup.config.js文件
import babel from 'rollup-plugin-babel'; import serve from 'rollup-plugin-serve'; export default { input: './src/index.js', // 引入的文件 output: { format: 'umd', // amd commonjs规范 默认将打包后的结果挂载到window上 file: 'dist/vue.js', // 打包出的vue.js 文件 new Vue name: 'Vue', sourcemap: true }, plugins: [ babel({ // 解析es6 -》 es5 exclude: "node_modules/**" // 排除文件的操作 glob }), serve({ // 开启本地服务 open: true, openPage: '/public/index.html', // 打开的页面 port: 3000, contentBase: '' }) ] }
2.新建.babelrc文件
{ "presets":[ "@babel/preset-env" ] }
3.新建src文件，在该文件下index.js
4.新建public文件，新建index.html文件
5.配置启动命令
package.json文件
{ "name": "rollup-serve", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "serve": "rollup -c -w" // 监听，热更新 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.10.2", "@babel/preset-env": "^7.10.2", "cross-env": "^7.0.2", "rollup": "^2.16.1", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-serve": "^1.0.1" } }
6.启动命令
$ npm run serve
自动生成了dist文件下的vue.js文件，在上面我们配置了，打开端口为3000
6.在index.html文件引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data(){
return {name: '张三'}
},
// }
});
</script>
</body>
</html>
这样就配置好了
学习记录一点，今天不学习明天变垃圾...
