乐趣区

关于rollup:rollup简易使用

jiezi

参考
原链接：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"},
退出移动版