参考
原链接：https://juejin.cn/post/693469...
作者：Alaso
起源：稀土掘金
rollup装置与应用
装置
npm i rollup -g # 全局装置npm i rollup -D # 我的项目本地装置应用
不应用配置文件
配置到script中
"build": "rollup -i src/index.js -o dist/bundle.js -f es"参数解释
- -i指定要打包的文件，-i是--input的缩写。
src/index.js是-i的参数，即打包入口文件。 - -o指定输入的文件，是--output.file或--file的缩写。(如果没有这个参数，则间接输入到控制台)
dist/bundle.js是-o的参数，即输入文件。 -f指定打包文件的格局，-f是--format的缩写。es是-f的参数，示意打包文件应用ES6模块标准。
npm run build应用配置文件
在我的项目根目录下创立rollup.config.js
export default {input: "./src/index.js",output: [ { file: './dist/my-lib-umd.js', format: 'umd', name: 'myLib' //当入口文件有export时，'umd'格局必须指定name //这样，在通过<script>标签引入时，能力通过name拜访到export的内容。 }, { file: './dist/my-lib-es.js', format: 'es' }, { file: './dist/my-lib-cjs.js', format: 'cjs' }]}应用Rollup的配置文件，能够应用rollup --config或者rollup -c指令。
//批改package.json的script字段"dev": "rollup -c" // 默认应用rollup.config.js"dev": "rollup -c my.config.js" //应用自定义的配置文件，my.config.js解决js
容许第三方模块
rollup-plugin-node-resolve 该插件会容许加载在 node_modules中的第三方模块。
依赖装置
npm i rollup-plugin-node-resolve配置插件
import resolve from 'rollup-plugin-node-resolve';export default { input: ..., output: ..., plugins:[ resolve() ]}根目录创立.babelrc文件配置
{ "presets": [ [ "@babel/preset-env" ] ]}es6转es5
依赖装置
npm i rollup-plugin-babel @babel/core @babel/preset-env --D配置插件
import babel from 'rollup-plugin-babel'export default { input: ..., output: ..., plugins:[ babel({ exclude: 'node_modules/**' }) ]}根目录创立.babelrc文件配置
{ "presets": [ [ "@babel/preset-env" ] ]}反对CommonJS模块
rollup默认是不反对CommonJS模块的
依赖装置
npm i rollup-plugin-commonjs --D配置插件
import commonjs from 'rollup-plugin-commonjs'export default { input: ..., output: ..., plugins:[ commonjs() ]}解决css
辨认css、less、scss文件
依赖装置
npm i rollup-plugin-postcss postcss --D配置插件
import postcss from 'rollup-plugin-postcss'import autoprefixer from 'autoprefixer'import cssnano from 'autoprefixer'plugins:[ postcss({ plugins: [ autoprefixer(), cssnano() ] })]增加款式前缀
依赖装置
npm i [email protected] -D配置插件
import postcss from 'rollup-plugin-postcss'export default { input: ..., output: ..., plugins:[ postcss() ]}解决sass
依赖装置
装置node-sass很麻烦，这里应用Dart-Sass替换Node-Sass
npm install [email protected]:dart-sass sass不必配置
css压缩
依赖装置
npm i rollup-plugin-postcss postcss --D配置插件
import postcss from 'rollup-plugin-postcss'import autoprefixer from 'autoprefixer'export default { input: ..., output: ..., plugins:[ postcss({ plugins: [ autoprefixer() ] }) ]}独立css文件
配置
postcss({ plugins: [ autoprefixer(), cssnano() ], extract: 'css/index.css' })解决vue文件
rollup-plugin-vue用于解决.vue文件。vue2和vue3我的项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。
- vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc
以vue3为例打包vue文件
依赖装置
npm i rollup-plugin-vue @vue/compiler-sfc配置
import vue from "rollup-plugin-vue";postcss({...output:[ { file: "./dist/salcor.umd.js", format: "umd", name: "salcor", // format为iife或者umd的时候必须配置, 会作为全局变量 sourcemap: true, // 生成源码映射文件 globals: { vue:'Vue' // 肯定要大写 }, },],external:[ 'vue'] })解决压缩js代码
依赖装置
npm i rollup-plugin-terser -D --legacy-peer-deps配置
import { terser } from 'rollup-plugin-terser'export default {input: ...,output: ...,plugins:[ terser()]}启用热部署服务器
依赖装置
这两个插件经常一起应用，rollup-plugin-serve用于启动一个服务器，rollup-plugin-livereload用于文件变动时，实时刷新页面。
npm i rollup-plugin-serve rollup-plugin-livereload -D配置
import serve from "rollup-plugin-serve";import livereload from "rollup-plugin-livereload";export default {input: ...,output: ...,plugins:[ serve({ contentBase: "", //服务器启动的文件夹，默认是我的项目根目录，须要在该文件下创立index.html port: 8020, //端口号，默认10001 }), livereload("dist"), //watch dist目录，当目录中的文件发生变化时，刷新页面]}咱们须要在index.html手动退出打包后的文件，js或者css，因为此时并没有主动注入。而后拜访http://localhost:8020就能够看到index.html中的内容。
rollup监听源文件的改变很简略，就是在执行打包命令时，增加 -w 或者 --watch
批改package.json 的script"scripts": { "dev": "rollup -wc"},