安装

npm install rollup --save-dev

// 根目录新建rollup.config.js
export default {
  input: './src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs', // 输出格式：amd/cjs/es6/iife/umd
    name: 'bundleName', // 如果是iife/umd需要指定一个全局变量
    sourcemap: true // 生成bundle.map.js文件，方便调试
  },
  external: ['jquery'], // 告诉rollup不要将jquery打包，而作为外部依赖
}

去掉无效代码

npm i rollup-plugin-cleanup -D

babel

cnpm i rollup-plugin-babel @babel/core @babel/preset-env -D

// rollup.config.js文件使用
import babel from 'rollup-plugin-babel'
{
  plugins: [
    babel({
      exclude: "node_modules/**"
    })
  ]
}

// 根目录下建文件： .babelrc
{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ]
}

rollup-plugin-commonjs

cnpm i rollup-plugin-commonjs -D

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
{
  plugins: [
    commonjs()
  ]
}

rollup-plugin-postcss

cnpm i rollup-plugin-postcss postcss -D

// 处理css需要用到的插件是rollup-plugin-postcss。它支持css文件的加载、css加前缀、css压缩、对scss/less的支持等等。
// 导入的css文件将用于生成style标签，插入到head中。
// rollup.config.js
import postcss from 'rollup-plugin-postcss'
{
  plugins: [
    postcss()
  ]
}

css加前缀

cnpm i autoprefixer -D

// rollup.config.js
import autoprefixer from 'autoprefixer'
{
  plugins: [
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]
}

// 使用autoprefixer除了以上配置，还需要配置browserslist，有2种方式，一种是建立.browserslistrc文件，另一种是直接在package.json里面配置

// package.json
{
  "browserslist": [
    "defaults",
    "not ie < 8",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}

css压缩

cnpm i cssnano -D

// 和autoprefixer一样，安装cssnano
// rollup.config.js
import cssnano from 'cssnano'
{
  plugins: [
    postcss({
      plugins: [
        cssnano()
      ]
    })
  ]
}

抽离单独的css文件

// rollup-plugin-postcss可配置是否将css单独分离，默认没有extract，css样式生成style标签内联到head中，配置了extract，就会将css抽离成单独的文件
// 抽离出来的css就需要自己手动在html文件中引入了
// rollup.config.js
{
  plugins: [
    postcss({
      plugins: [
        cssnano()
      ],
      extract: "css/index.css"
    })
  ]
}

使用SCSS

cnpm i node-sass -D 如果已经配置postcss，安装后不需要额外的配置，直接使用scss文件即可

rollup-plugin-terser

cnpm i rollup-plugin-terser -D

// rollup.config.js
import { terser } from 'rollup-plugin-terser'
{
  plugins: [
    terser()
  ]
}

rollup-plugin-serve rollup-plugin-livereload

cnpm i rollup-plugin-serve rollup-plugin-livereload -D

// 这两个插件常常一起使用，rollup-plugin-serve用于启动一个服务器，rollup-plugin-livereload用于文件变化时，实时刷新页面。
// rollup.config.js
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

{
  plugins: [
    serve({
      contentBase: '/',  //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html
      port: 3000
    }),
    livereload('dist') // //watch dist目录，当目录中的文件发生变化时，刷新页面
  ]
}

// rollup监听源文件的改动很简单，就是在执行打包命令时，添加 -w 或者 --watch 
// package.json
"scripts": {
   "dev": "rollup -wc"
}

acorn --- > ast

// parse方法把源代码转成抽象语法树
let astTree = acorn.parse('import $ from "jquery"')

// 遍历语法树中的每一条语句
astTree.body.forEach(statement => {
// 每一条语句传递给walk方法，由walk遍历这条语句的子元素
// 采用深度优先的遍历方式
    walk(statement, {
        enter(node) {
        
        },
        leave(node) {}
    })
})

mock

name: '@cname'

env

.env.development
.env.production
VITE_BASE_API = 'xxx'
import.meta.env

roolup

安装