My-Project

Appearance

rollup ​

安装 ​

bash
pnpm add rollup

命令操作 ​

定义一个main.js文件用来做打包测试，在package.json中添加打包测试

js
const random = () => {
  return Math.random().toString(36).substr(2);
};

console.log('1 =====', random());
console.log('2 =====', random());
json
{
  "scripts": {
    "build:rollup": "rollup ./scripts/main.ts --file ./dist/main.js --format iife"
  }
}

rollup 命令行参数

  • 第一个参数表示入口文件
  • --file 表示输出文件
  • --format 表示输出格式：amd、cjs、es、iife、umd、system
  • --config 表示指定配置文件路径
  • --watch 监听文件变化，自动打包

配置文件打包 ​

在命令中添加--config参数，指定配置文件路径rollup.config.js，之后通过rollup --config rollup.config.js进行打包

js
export default {
  // 入口文件
  input: './scripts/main.ts',
  output: {
    // 单入口打包只需要指定file，不需要指定dir（多入口打包需要指定dir）
    // dir: 'dist',
    file: './dist/bundle.js',
    format: 'iife',
    name: 'modify',
    piugins: []
  },
  plugins: [
    // 插件
  ]
};

插件 ​

通过Babel对高级语法进行转换 ​

安装这个 @rollup/plugin-babel插件 ，同时需要安装babel的相关插件，前面的入口文件当中使用到了箭头函数，接下来使用这个插件看打包结果是否会转换为普通函数

bash
pnpm -Dw add @rollup/plugin-babel

pnpm -Dw add @babel/core @babel/plugin-transform-runtime @babel/runtime @babel/preset-env

先配置babel，添加babel.config.js文件，之后修改rollup.config.js文件，添加@rollup/plugin-babel 插件，如果打包入口是ts文件，需要添加extensions参数，把ts加上

  • 单入口打包指定file，多入口打包需要指定dir
  • 其中多入口打包后的文件名与设置的key一致【如下main.ts的key为index，打包后的文件名为index.js】
js
export default {
  presets: ['@babel/preset-env'],
  plugins: [
    '@babel/plugin-transform-runtime'
  ]
};
js
import {babel} from '@rollup/plugin-babel';

export default {
  // 单入口打包
  // input: './scripts/main.ts',
  input: {
    index: './scripts/main.ts'
  },
  output: {
    // 单入口用这个指定打包文件名
    // file: './dist/bundle.js',
    // 多入口用这个指定打包目录
    dir: 'dist',
    format: 'iife',
    name: 'modify'
  },
  plugins: [babel({babelHelpers: 'runtime', exclude: 'node_modules/**', extensions: ['.js', '.jsx', 'ts', '.tsx']})]
};
js
(function () {
  'use strict';

  var random = function random() {
    return Math.random().toString(36).substr(2);
  };
  console.log('1 =====', random());
  console.log('2 =====', random());

})();

清除之前的构建文件 ​

在进行多入库构建时，修改key之后进行重新打包，之前的构建文件会保留，我修改了key之后并不想保留之前的构建文件。本质上就是通过node脚本把这个dist先删掉。

安装插件 rollup-plugin-clear 修改rollup.config.js 文件，和添加babel插件一样，其中targets参数指定要删除的目录，watch参数指定是否监听文件变化，自动删除指定目录下的文件，使用这个需要在执行命令的时候添加--watch 参数

bash
pnpm -Dw add rollup-plugin-clear
js
import clear from 'rollup-plugin-clear';

export default {
  plugins: [
    clear({
      targets: ['dist'],
      watch: true
    })
  ]
};

路径别名 ​

@rollup/plugin-alias

bash
pnpm -Dw add @rollup/plugin-alias
js
import alias from '@rollup/plugin-alias';

export default {
  plugins: [
    // 路径别名
    alias({
      entries: [
        {find: '@', replacement: './src'},
      ]
    })
  ]
};

json解析 ​

使用这个插件@rollup/plugin-json

代码压缩 ​

在打包之后会打包后的代码进行一个压缩，安装这个插件@rollup/plugin-terser

bash
pnpm -Dw add @rollup/plugin-terser

只需要修改output选项添加plugins: [terser()] 即可，这里output可以是数组，每个元素表示一个打包输出，每个元素可以添加不同的配置，比如压缩和不压缩分别打包到不同的目录下，

注意点：因为入口文件是一个但是想打包出压缩和不压缩两个版本，就需要指定不同的文件名，使用entryFileNames 来指定文件名

js
import terser from '@rollup/plugin-terser';

export default {
  output: [{
    dir: 'dist',
    format: 'iife',
    name: 'modify',
    entryFileNames: '[name].min.js',
    plugins: [terser()]
  }, {
    dir: 'dist',
    format: 'iife',
    name: 'modify',
    entryFileNames: '[name].js'
  }],
};

生成html文件 ​

安装这个插件rollup-plugin-generate-html-template

bash
pnpm -Dw add rollup-plugin-generate-html-template

把这个插件加上到plugins中，并添加相应的配置，需要指定模版文件和输出文件，之后再进行打包会发现dist当中会生成一个html文件，这个文件会自动注入打包结果

js
import htmlTemplate from 'rollup-plugin-generate-html-template';

export default {
  plugins: [
    // 根据模版生成 html，自动注入打包结果
    htmlTemplate({
      // 模版文件位置
      template: './scripts/index.html',
      // 和output.dir指定的目录一致
      target: 'index.html'
    })
  ]
};

但是当打包的类型是esm的时候，这个时候再运行html，会发现报错Uncaught SyntaxError: Unexpected token 'export' (at index.min.js:1:117)，是因为HTML中的script标签默认加载的是传统脚本（classic script），无法直接使用 import/export 语法。需要手动给script标签加上type="module"，

在这个插件当中可以添加属性attrs: ['type="module"']，这个会默认加到script标签中，async、defer

打包第三方依赖 ​

在入库js当中引入vue定义一个响应式数据，这个时候执行打包，会报错Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"，这是因为vue这个依赖没有打包进去

安装插件@rollup/plugin-node-resolve

bash
pnpm -Dw add @rollup/plugin-node-resolve

使用这个插件，只需要添加这个插件到plugins中，就可以打包第三方依赖了

js
import {nodeResolve} from '@rollup/plugin-node-resolve';

export default {
  plugins: [nodeResolve()]
};

打包之后去查看代码，可以发现是将vue打包进去了，但是运行起来之后会发现里面有process去判断环境的代码，这个node下才有的变量，在浏览器当中是运行不了的。

字符替换 ​

为了解决上面的问题，就需要使用这个插件@rollup/plugin-replace

bash
pnpm -Dw add @rollup/plugin-replace

使用插件，参数是一个对象，里面可以添加多个替换的参数

  • 参数的key是替换的key，value是替换的值
  • 如果value是一个函数，那么这个函数会返回替换的值，这个函数会接收一个参数，这个参数是替换的key，这个函数返回的值会替换掉key的值。
js
import replace from '@rollup/plugin-replace';

export default {
  plugins: [
    // 替换打包结果中的关键词（浏览器不兼容）
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      __buildDate__: () => JSON.stringify(new Date()),
      __buildVersion: 15,
      // 防止替换字符串后跟单个等号
      preventAssignment: true
    })
  ]
};

启动静态服务器 ​

安装插件 rollup-plugin-serve

这个插件在修改vue文件之后不会刷新页面，可以安装rollup-plugin-live-server 插件，这个插件也不是做热替换，是直接自动帮你刷新了一下页面

bash
pnpm -Dw add rollup-plugin-serve

使用插件，参数是一个对象，里面可以添加多个配置项，等执行打包之后在dist目录下启动一个静态服务器

  • open：是否自动打开浏览器
  • contentBase：指定静态资源的目录
  • openPage：指定打开的页面
  • host：指定主机名
  • port：指定端口号
js
import serve from 'rollup-plugin-serve';

export default {
  plugins: [
    serve({
      open: true,
      contentBase: 'dist',
      openPage: '/index.html',
      host: 'localhost',
      port: 10000
    })
  ]
};

处理vue单文件组件 ​

处理模版 ​

现在我是一个vue项目，然后我想通过rollup对这个主入口main.js进行打包，这肯定是会报错的[!] RollupError: scripts/App.vue (1:0): Expression expected (Note that you need plugins to import files that are not JavaScript)

js
import {createApp} from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

在webpack当中对vue打包需要添加对应的loader，在这里也需要安装插件rollup-plugin-vue

bash
pnpm -Dw add rollup-plugin-vue

使用插件，现在vue单文件组件lang设置为ts还是报错，先暂时设置为js

js
import vuePlugin from 'rollup-plugin-vue';

export default {
  plugins: [vuePlugin()]
};

处理样式 ​

安装插件rollup-plugin-postcss，这个插件可以用来处理css，

bash
pnpm -Dw add rollup-plugin-postcss

插件使用，其中可以设置extract属性，这个属性可以指定是否将样式抽离到单独的文件中，如果设置为true ，那么就会将样式抽离到单独的文件中，如果设置为false，那么就会将样式内联到html中，如果设置为string，那么就会将样式抽离到指定的文件中

js
import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss({
      // 把样式抽离到单独的文件中
      extract: true
      // extract: 'dist/my-custom-file-name.css'
    })
  ]
};

当然了不单单只是处理css，还可以对css进行压缩和添加兼容性。安装插件依赖autoprefixer和cssnano ,这两个插件是用来处理css的，autoprefixer是用来添加浏览器前缀的，cssnano是用来压缩css的

bash
pnpm -Dw add autoprefixer cssnano

使用插件，这个是添加到postcss当中的plugins当中的，同时需要在package.json文件中添加一个browserslist属性，用来指定浏览器的兼容性。

js
import postcss from 'rollup-plugin-postcss';
import cssnano from 'cssnano';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [
    postcss({
      // 把样式抽离到单独的文件中
      extract: true,
      // extract: 'dist/my-custom-file-name.css',
      plugins: [cssnano(), autoprefixer()]
    })
  ]
};
json
{
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 ie version"
    ]
  }
}

如果使用到了scss或者less，那么就需要安装对应的编译器sass、node-sass、less

环境变量设置 ​

在windows中设置环境变量，可以使用set命令，但是这个命令只能设置临时环境变量，如果需要设置全局环境变量，可以使用setx命令

bash
"build": "set NODE_ENV=production&& rollup -c rollup.config.js",

cross-env这个插件是为了解决运行跨平台设置和使用环境变量的脚本

bash
pnpm -Dw add cross-env

那么build脚本就可以改写成这样

bash
"build:cross-env": "cross-env NODE_ENV=production rollup -c rollup.config.js",

设置这个环境变量主要是为了在rollup.config.js文件中使用process.env.NODE_ENV这个变量，现在这个变量的值就是production ，就可以通过这个变量来控制在生产环境下要使用那些插件来进行打包，比如terser 插件，这个插件可以压缩代码，但是这个插件只在生产环境下使用，所以就可以通过这个变量来判断是否使用这个插件

引入CDN ​

在前面我们一个vue项目，只编写了一个响应式变量进行打包，打包体积就很大了，这显然不是我们想要的，接下来就引入CDN进行打包，减少打包体积

首先在rollup.config.js当中添加配置，external属性可以指定哪些包需要被排除，在output当中添加一个globals 属性，这个属性的值是一个对象，对象中的键是包名，值是包在打包后的全局变量名，

globals中配置的为什么是‘Vue’? 通过CDN使用vue 之前看官方文档确实没注意到哈，后面所有通过CDN引入的都可以去对应官网找CDN配置

js
export default {
  output: [
    {
      dir: 'dist',
      format: 'esm',
      entryFileNames: '[name].min.js',
      plugins: [isProduction ? terser() : ''],
      globals: {vue: 'Vue'}
    }
  ],
  // 排除包
  external: ['vue']
};

同时修改模版文件，在模版文件当中引入CDN，需要注意的是如果打包后的文件是es modules，那么需要使用es modules的引入方式，如果打包后的文件是iife，那么需要使用iife的引入方式

html
<!--iife-->
<script src="https://unpkg.com/vue@3.5.22/dist/vue.global.js"></script>
<!--es modules-->
<script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@3.5.22/+esm"
      }
    }
</script>

当使用异步导入的时候，rollup会默认进行拆分（比方说：vue-router的路由当中用异步导入组件的时候再进行构建），iife是不支持拆分的，这个时候就会报错[!] RollupError: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

模块拆分 ​

使用到rollup的output.manualChunks配置

  • 对象，对象中的键是模块名，值是模块名对应的模块
  • 函数，函数的参数是模块的id，返回值是模块名

同时加上chunkFileNames属性，这个属性对代码分割中产生的 chunk 自定义命名

js
export default {
  output: [
    {
      // 模块拆分
      // manualChunks: {
      //   'vue': ['vue'],
      //   'vue-router': ['vue-router']
      // }
      manualChunks: (id) => {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
        return null;
      },
      // 静态文件命名
      assetFileNames: '[name]-[hash][extname]',
      // chunk分包文件命名
      chunkFileNames: '[name]-[format].js'
    }
  ]
};

sourcemap ​

如果该选项值为 true，那么将生成一个独立的 sourcemap 文件。如果值为 "inline"，那么 sourcemap 会以 data URI 的形式附加到 output 文件末尾。如果值为 "hidden"，那么它的表现和 true 相同，除了 bundle 文件中将没有 sourcemap 的注释。

By Modify.

Copyright © 2023-present Evan You