介紹
Rollup 是一個 JavaScript 模塊打包器屁倔，可以將小塊代碼編譯成大塊復雜的代碼狼讨，使用ES6標準打包代碼。
使用場景
在開發(fā)應用時使用 Webpack铜犬，開發(fā)庫時使用 Rollup
開始
yarn init -y
安裝依賴
yarn add rollup
配置rollup.config.js文件
export default {
input: "./src/index.js", // 程序入口
output: {//文件輸出配置
file: "./dist/bundle.cjs.js", // 打包生成的文件位置和文件名
format: "cjs" // 輸出格式
}
}
運行
yarn run rollup -c
rollup配置文件解析
- input
No.1.1 - output
format: 五種輸出格式：amd / es6 / iife / umd / cjs
name: 當format為iife和umd時必須提供柑肴，將作為全局變量掛在window(瀏覽器環(huán)境)下：window.A=...
sourcemap:true //生成bundle.map.js文件霞揉，方便調(diào)試 - plugins 各種插件配置
rollup-plugin-node-resolve // 幫助尋找node_modules里的包
rollup-plugin-babel // rollup 的 babel 插件，ES6轉ES5
rollup-plugin-replace // 替換待打包文件里的一些變量晰骑，如process在瀏覽器端是不存在的适秩，需要被替換
rollup-plugin-commonjs // 將非ES6語法的包轉為ES6可用
rollup-plugin-uglify // 壓縮包 - external
external:['react'] //告訴rollup不要將此react打包绊序，而作為外部依賴
- plugins
external: ['react', 'redux'], // 告訴rollup，不打包react,redux;將其視為外部依賴
globals: {
react: 'React', // 跟external 是配套使用的秽荞，指明global.React即是外部依賴react骤公。
redux: 'Redux'
}
深入
為了正確解析我們的模塊并使其與舊版瀏覽器兼容，使用babel來編譯輸出
- 安裝 rollup-plugin-babel @babel/core 和 @babel/preset-env
cnpm install rollup-plugin-babel @babel/core @babel/preset-env -D
- 增加babel配置到 rollup.config.js
plugins: [
babel({exclude: 'node_modules/**'}) //排除依賴 只編譯我們的源代碼
]
- 添加Babel配置文件.babelrc
{
"presets":["@babel/preset-env"]
}
