前言：
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>
這樣就配置好了
學習記錄一點，今天不學習明天變垃圾...