rollup简易使用

参考
原链接：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 autoprefixer@8.0.0 -D

配置插件

import postcss from 'rollup-plugin-postcss'
export default {
  input: ...,
  output: ...,
  plugins:[
    postcss()
  ]
}

处理sass

依赖安装

安装node-sass很麻烦，这里使用Dart-Sass替换Node-Sass

npm install node-sass@npm: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"
  },