关于rollup: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 [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"},