初识rollup 打包、配置vue脚手架

rollup javascript 代码打包器，它使用了 es6 新标准代码模块格式。

特点：

面向未来，拥抱 es 新标准，支持标准化模块导入、导出等新语法。
tree shaking 静态分析导入的代码。排除未实际引用的内容
兼容现有的 commonJS 模块，可通过插件导入

示例项目地址

安装使用

创建示例项目

$> mkdir rollup-example
$> cd rollup-example

安装 rollup

$> npm init -y
$> npm i rollup

创建main.js 主入口文件。创建 libs目录用于方式封装的功能函数。

在package.json文件中定义执行脚本命令。

--file 编译后的文件名称简写 -o
--format 按什么标准去编译文件类型 iffe、cjs、es。简写-f

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup main.js --file bundle.js --format iife"
  }
}

在libs创建arry.js

/**
 * 数组类型校验
 * @param {*} target
 * @returns
 */
export const isArray = (target) => {
  return Array.isArray(target);
};
/**
 * 数组去重
 * @param {*} target
 * @returns
 */
export const duplicateKill = (target) => {
  return [...new Set(target)];
};

然后在main.js 中调用

import { isArray } from "./libs/array";

//
console.log(isArray(3));
console.log(isArray("1,2,3,4"));
console.log(isArray([1, 2, 3, 4]));

执行npm run build,得到一个编译文件bundle.js

(function () {
  "use strict";

  /**
   * 数组类型校验
   * @param {*} target
   * @returns
   */
  const isArray = (target) => {
    return Array.isArray(target);
  };

  //
  console.log(isArray(3));
  console.log(isArray("1,2,3,4"));
  console.log(isArray([1, 2, 3, 4]));
})();

通过配置文件定义编译配置

上面使用了rollup 命令，并通过命令行参数指定文件以及编译类型。

定义rollup.config.js 文件，定义编译输出

// rollup.config.js

export default {
  input: "main.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
};

然后修改package.json

--config 指定配置文件, 简写-c
--bundleConfigAsCjs 因为配置文件是以 .js结尾的，通常建议使用.cjs.

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup --config rollup.config.js --bundleConfigAsCjs"
  }
}

然后执行 npm run build 可以看到生成的dis/bundle.js

也可以省略配置文件，rollup 会自动加载根目录下的rollup.config.js , rollup --config --bundleConfigAsCjs

多入口打包文件，配置文件可以是数组对象

会有一些多入口页面打包，通过配置入口，删除不同目录文件的编译资源

定义rollup.config.js 文件

// rollup.config.js

export default [
    {
        input: "main.js",
        output: {
            file: "dist/bundle.js",
            format: "iife",
        }
    },
    {
        input: "login.js",
        output: {
            file: "dist/login.js",
            format: "iife",
        }
    }
],

如果想要输出多个类型的编译资源output 配置为数组

// rollup.config.js

export default [
    {
        input: "main.js",
        output: [
            {
                file: "dist/bundle.js",
                format: "iife",
            },
            {
                file: "dist/bundle-es.js",
                format: "es",
            },
            {
                file: "dist/bundle-cjs.js",
                format: "cjs",
            }
        ]
    },
],

可异步请求配置文件

如果是在线配置，存储在后端。可通过请求获取配置文件。

// rollup.config.js
import ajax from "libs/ajax";
export default ajax.get("/**/**/rolleup-config");

多接口、都入口配置，则改为

// rollup.config.js
import ajax from "libs/ajax";
export default Promise.all([
  ajax.get("/**/**/rolleup-config-main"),
  ajax.get("/**/**/rolleup-config-login"),
]);

通过命令行参数适用不同的配置文件

开发坏境和生产环境有不同的配置。通过命令行参数，使用对应的配置文件。

// rollup.config.js
import devConfig from "./build/rollup.dev.config.js";
import prdConfig from "./build/rollup.prd.config.js";

export default (commandLineArgs) => {
  if (commandLineArgs.environment === "dev") {
    return devConfig;
  }
  return prdConfig;
};

修改package.json 提供 dev、build 脚本

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "rollup --config --environment dev --bundleConfigAsCjs",
    "build": "rollup --config --bundleConfigAsCjs --environment prd"
  }
}

`rollup.config.js` 配置文件说明

// rollup.config.js

// can be an array (for multiple inputs)
export default {
  // core input options
  external,
  input: "main.js", // 主入口文件配置路径
  plugins, // 使用插件，

  // advanced input options
  cache,
  onwarn,
  preserveEntrySignatures,
  strictDeprecations,

  // danger zone
  acorn,
  acornInjectPlugins,
  context,
  moduleContext,
  preserveSymlinks,
  shimMissingExports,
  treeshake,

  // experimental
  experimentalCacheExpiry,
  perf,

  // required (can be an array, for multiple outputs)
  output: {
    // core output options
    dir: "dist", // 编译文件目录地址，多个编译文件则必须指定
    file: "dist/bundle.js", // 编译后文件目录路径
    format, // 文件编译类型 es cjs iife
    globals,
    name,
    plugins, // 针对某些输出的插件

    // advanced output options
    assetFileNames,
    banner,
    chunkFileNames,
    compact,
    entryFileNames,
    extend,
    footer,
    hoistTransitiveImports,
    inlineDynamicImports,
    interop,
    intro,
    manualChunks,
    minifyInternalExports,
    outro,
    paths,
    preserveModules,
    preserveModulesRoot,
    sourcemap,
    sourcemapBaseUrl,
    sourcemapExcludeSources,
    sourcemapFile,
    sourcemapPathTransform,
    validate,

    // danger zone
    amd,
    esModule,
    exports,
    externalLiveBindings,
    freeze,
    indent,
    namespaceToStringTag,
    noConflict,
    preferConst,
    sanitizeFileName,
    strict,
    systemNullSetters,
  },

  watch: {
    buildDelay,
    chokidar,
    clearScreen,
    skipWrite,
    exclude,
    include,
  },
};

使用一个加载`json`文件的插件

安装

$> npm i --save-dev @rollup/plugin-json

在配置中使用插件

// rollup.config.js prd
import PluginJson from "@rollup/plugin-json";

export default {
  input: "main.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
  plugins: [PluginJson()],
};

然后在项目中可以导入 JSON 文件，按对象取值。

import { version } from "./package.json";
// import packageJson from "./package.json";

console.log(version);

可以针对输出`output` 配置插件

最小化构建代码,压缩代码，安装@rollup/plugin-terser

$> npm install --save-dev @rollup/plugin-terser

修改配置文件，在编译类型为 es 的输出使用插件

// rollup.config.js dev
import PluginJson from "@rollup/plugin-json";
import PluginTerser from "@rollup/plugin-terser";

export default {
  input: "main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "iife",
    },
    {
      file: "dist/bundle-es.js",
      format: "es",
      plugins: [PluginTerser()],
    },
    {
      file: "dist/bundle-cjs.js",
      format: "cjs",
    },
  ],
  plugins: [PluginJson()],
};

执行npm run build 可以看到bundle-es.js文件代码被压缩，没有任何格式

动态加载已使用代码拆分

在以下情况会自动进行代码拆分

动态加载模块
多入口引入统一模块。
通过输出配置output.manualChunks指定需要拆分的模块

[!] RollupError: Invalid value “iife” for option “output.format” - UMD and IIFE output formats are not supported for code-splitting builds.

编译类型 UMD、IIFE 是不支持代码拆分的。改用 cjs

实现login模块的拆分，创建 login 文件入口。然后在 main.js 文件中动态引入

import("./login.js").then(() => console.log("成功加载login..."));

需要修改配置指定编译目录dir:'dist'，原来指定的 file 只是编译生成一个文件包。现在拆分代码，会生成多个编译包。

// rollup.config.js prd
import PluginJson from "@rollup/plugin-json";

export default {
  input: "main.js",
  output: {
    // file: "dist/bundle.js",
    format: "cjs",
    dir: "dist",
  },
  plugins: [PluginJson()],
};

在这里插入图片描述

定义插件，以满足定制化需求

编译时可能会需要一些定制化处理。通过自定义插件实现代码的转换。

示例实现一个移除console.log 的代码。一个插件约束

插件名需要以rollup-plugin-**开头
package.json 中包含 rollup-plugin 关键字，构建后发布之前需要加前缀
经过全面的测试。
插件中尽可能的使用英文说明。
尽可能的使用异步方法读取文件，比如使用 fs.readFile 而不是 fs.readFileSync
插件是虚拟模块时，前缀追加\0.以便其他插件不去处理它。

项目目录下创建存储插件的位置 plugins/rollup-plugin-clear-console.js

// rollup-plugin-clear-console
import { createFilter } from "@rollup/pluginutils";

export default function clearConsole(options = {}) {
  // filter file
  var filter = createFilter(options.include, options.exclude);
  return {
    name: "clear-console",
    transform(code, id) {
      /**
       * code 为加载的文件内容
       * id 为当前内容文件的路径地址，通过filter判断是否符合处理的要求
       */
      if (!filter(id)) return;
      try {
        return {
          code: code.replace(/console\.log(\w*)/gi, ""),
          map: { mappings: "" },
        };
      } catch (err) {
        var message = "An error occurred during processing";
        this.error({ message: message, id: id, cause: err });
        return null;
      }
    },
  };
}

@rollup/pluginutils 是针对编写 rollup 插件封装的一些功能性的函数，比如示例中使用了createFilter,可以帮助过滤指定的文件、排除指定文件。

在rollup.config.dev.js使用自定义插件,并制定处理目录下为main.js的文件。

// rollup.config.js prd
import PluginJson from "@rollup/plugin-json";
// 自定义插件
import PluginClearConsole from "../plugins/rollup-plugin-clear-console";

export default {
  input: "main.js",
  output: {
    // file: "dist/bundle.js",
    format: "cjs",
    dir: "dist",
  },
  plugins: [
    PluginJson(),
    PluginClearConsole({
      include: ["**/main.js"],
    }),
  ],
};

然后执行脚本，看看效果npm run dev

在dis/main.js文件中可以看到所有的console.log都被移除。而且由于移除这些代码，一些导入的变量未被使用，也被 tree shaking 了。

在这里插入图片描述

可以看到拆包编译的login.js文件中还是包含有console.log代码的。

配置一起使用`vue`

需要安装的 vue 相关的插件, 在 rollup-awesome 官方推荐的组件库

$> npm install rollup-plugin-vue vue --save-dev

安装的都是最新版本，vue 版本为3.2.45

创建 src 目录，用于 vue 视图组件的存放位置。

// index.js
import { createApp } from "vue";

import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

在项目目录下创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rollup-vue2</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 导入编译后的文件包 -->
    <script src="./dist/index.js"></script>
  </body>
</html>

修改 rollup 配置文件rollup.config.dev.js

// rollup.config.dev.js dev
import PluginJson from "@rollup/plugin-json";
import PluginVue from "rollup-plugin-vue";
// 自定义插件
import PluginClearConsole from "../plugins/rollup-plugin-clear-console";

export default {
  input: "./src/index.js",
  output: {
    // file: "dist/bundle.js",
    format: "es",
    dir: "dist",
  },
  plugins: [
    PluginVue(),
    PluginJson(),
    PluginClearConsole({
      include: ["**/main.js"],
    }),
  ],
};

然后执行 npm run dev ，打包编译后，通过live server启动一个服务访问 index.html

服务启动页面不展示问题

页面打开后没有任何展示，控制台报错 Cannot use import statement outside a module ,查看编译包./dist/index.js . 没有将 vue 一起打包进去。加载不到

解决，安装依赖@rollup/plugin-node-resolve ,将 vue 一起编译进去。

$> npm install @rollup/plugin-node-resolve --save-dev

修改配置，引入插件。可以将 node_modules 中的组件包引入打包进编译包。

// rollup.config.dev.js dev
import PluginNodeResolve from "@rollup/plugin-node-resolve";

export default {
  // ... other
  plugins: [
    // ... other
    PluginNodeResolve(),
  ],
};

可以看到编译包变大了，vue 已经打包进去了，但是页面还不展示，报错Uncaught ReferenceError: process is not defined, 查看编译包./dist/index.js ，引用全局变量process.env.NODE_ENV 没有定义

解决，安装插件 @rollup/plugin-replace

$> npm install @rollup/plugin-replace --save-dev

修改配置，引入插件。编译后替换编译包中的目标字符串。

// rollup.config.dev.js dev
import PluginReplace from "@rollup/plugin-replace";

export default {
  // ... other
  plugins: [
    // ... other
    PluginReplace({
      "process.env.NODE_ENV": JSON.stringify("development"),
      preventAssignment: true,
    }),
  ],
};

页面打开展示正常。

生成 html 文件，`npm run dev`创建一个服务

为了达到开发的目的，需要自动生成 html 文件，自动注入人编译后的资源包。还有其他资源的解析、加载等。

生成 html 文件

安装依赖插件，生成 index.html，并将所有编译的资源包添加到页面上。

$> npm install @rollup/plugin-html --save-dev

使用插件

// rollup.config.dev.js dev
import PluginHtml from "@rollup/plugin-html";

export default {
  // ... other
  plugins: [
    // ... other
    PluginHtml({
      title: "rollup-vue3",
      fileName: "index.html",
    }),
  ],
};

开发模式，启动 serve 服务

安装依赖插件，启动一个服务

$> npm install rollup-plugin-serve --save-dev

使用插件

// rollup.config.dev.js dev
import PluginServe from "rollup-plugin-serve";

export default {
  // ... other
  plugins: [
    // ... other
    PluginServe({
      // 运行在浏览器中
      open: true,
      // 运行成功后，打开的地址
      openPage: "/",
      // 打印服务地址
      verbose: true,
      // 地址，端口号
      // host:"::",
      host: "127.0.0.1",
      port: 8009,
      // https 协议配置
      // https: {},
      // 运行成功，事件
      onListening: function (server) {
        const address = server.address();
        const host = address.address === "::" ? "localhost" : address.address;
        // by using a bound function, we can access options as `this`
        const protocol = this.https ? "https" : "http";
        console.log(
          `Server listening at ${protocol}://${host}:${address.port}/`
        );
      },
    }),
  ],
};

运行成功后，未自动打开浏览器，serve 配置中的 open、openPage 暂时没有发现其作用
设置"::"不生效，设置为“127.0.0.1” 启动后正常打开。

`--watch` 监听模式，开发是文件变动重新编译

服务虽然启动了，但也仅仅是一个静态资源的服务，在开发的时候，通常需要实时编译改动的文件，希望立刻看到变化

修改启动脚本,在监听模式下，文件发生更改，就会重新编译。--watch 等同于 -w

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  - "dev": "rollup --config --environment dev --bundleConfigAsCjs -w",
  + "dev": "rollup --config --environment dev --bundleConfigAsCjs",
  },
}

虽然重新编译了，但是浏览器中还是需要手动刷新才能看到变化。–需要唤起浏览器服务的插件–

解析`.vue`中的样式 style

在 App.vue 中书写了样式，发现在页面中没有生效

<style>
.app p {
  font-size: 32px;
}
</style>

增加插件postcss \ rollup-plugin-postcss

$> npm i postcss rollup-plugin-postcss -D

配置rollup.config.dev.js

import PluginPostCss from "rollup-plugin-postcss";

export default {
  //...
  plugins: [
    //...
    PluginPostCss(),
  ],
};

重新运行，可以看到样式生效了。默认编译后的 css 样式是注入到 html 的 head 中。

使用预编译 less

安装 less

$> npm i less -D

即可直接使用

<style lang="less">
.app {
  p {
    font-size: 32px;
    color: aqua;
  }
  button {
    color: red;
  }
}
</style>

支持 JSX 语法

比较喜欢 jsx 语法的书写方式，实现相关配置；

import { defineComponent } from "vue";

export default defineComponent({
  name: "IFunLazySelect",
  render() {
    return (
      <div class="lazy-select">
        {/* 相关代码 */}
      </div>
})

安装 @vue/babel-plugin-jsx, 还需要安装@babel/core 、@babel/preset-env

$> npm install @vue/babel-plugin-jsx @babel/core @babel/preset-env -D

新建.babelrc.js,配置

module.exports = {
  presets: [["@babel/env", { modules: false }]],
  plugins: ["@vue/babel-plugin-jsx"],
};

这只是 babel 配置，还需要集成到 rollup 中，使之生效，安装@rollup/plugin-babel

则需要修改rollup.config.base.js,增加插件配置。

// rollup.config.base.js

import PluginBabel from "@rollup/plugin-babel";

export default {
  plugins: [
    // ... other
    PluginBabel({ babelHelpers: "bundled" }),
  ],
};

重新启动项目，完美运行。

其他插件

解析 commonJS 模块，转换成 es6 模块。安装依赖

$> npm install @rollup/plugin-commonjs --save-dev

修改配置

// rollup.config.dev.js dev
import PluginCommonJS from "@rollup/plugin-commonjs";

export default {
  // ... other
  plugins: [
    // ... other
    PluginCommonJS(),
  ],
};

全局注入，比如使用 jquery，安装依赖

$> npm install @rollup/plugin-inject --save-dev

修改配置

// rollup.config.dev.js dev
import PluginInject from "@rollup/plugin-inject";

export default {
  // ... other
  plugins: [
    // ... other
    PluginInject({
      $: "jquery",
    }),
  ],
};

定义别名路径，比如通常使用@代替./src路径

$> npm install @rollup/plugin-alias --save-dev

修改配置

// rollup.config.dev.js dev
import PluginAlias from "@rollup/plugin-alias";

export default {
  // ... other
  plugins: [
    // ... other
    PluginAlias({
      entries: {
        "@": "../src",
        libs: "../libs",
      },
    }),
  ],
};

加载图片资源，.png\.jpeg\.svg 等

$> npm install @rollup/plugin-image --save-dev

修改配置

// rollup.config.dev.js dev
import PluginImage from "@rollup/plugin-image";

export default {
  // ... other
  plugins: [
    // ... other
    PluginImage(),
  ],
};