自动打包

2023年03月04日

柏拉文

越努力，越幸运

Rollup 提供了命令行 API 来生成bundle

构建

src/index.ts

import "./index.scss";
import $ from "jquery";
import { getName } from "util/index";
import { getName1 } from "util/index1";
import cloneDeep from "lodash/cloneDeep";
import underscore from "underscore";

const test = () => {
  return process.env.NODE_ENV;
};

const envStr = test();
console.log(envStr);

const nameStr = getName();
console.log(nameStr);
const nameStr1 = getName1();
console.log(nameStr1);

const promiseFunc = () => {
  return new Promise((resolve, reject) => {
    resolve(100);
  });
};

const asyncFunc = async () => {
  const result = await promiseFunc();
  console.log(result);
};

asyncFunc();

const data = {
  name: "dataName",
};

const dataCopy = cloneDeep(data);
dataCopy.name = "dataCopyName";

console.log(data);
console.log(dataCopy);

const dataCopy1 = underscore.clone(data);
dataCopy1.name = "dataCopy1Name";
console.log(data);
console.log(dataCopy1);

console.log($(".box"));

package.json

{
  "name": "manual",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "rollup --watch  --config rollup.config.js --environment NODE_ENV:development"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.21.0",
    "@rollup/plugin-alias": "^4.0.3",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-html": "^1.0.2",
    "@rollup/plugin-json": "^6.0.0",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-replace": "^5.0.2",
    "@rollup/plugin-terser": "^0.4.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@types/node": "^18.14.6",
    "babel-plugin-lodash": "^3.3.4",
    "node-sass": "^8.0.0",
    "postcss": "^8.4.21",
    "rollup": "^3.18.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-serve": "^2.0.2",
    "sass": "^1.58.3",
    "tslib": "^2.5.0",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "@types/jquery": "^3.5.16",
    "@types/lodash": "^4.14.191",
    "@types/underscore": "^1.11.4",
    "jquery": "^3.6.3",
    "lodash": "^4.17.21",
    "underscore": "^1.13.6"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "strict": true,
    "newLine": "LF",
    "allowJs": true,
    "types": ["node"],
    "jsx": "preserve",
    "target": "es2015",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "lib": ["es2015", "esnext", "dom"],
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "util/*": ["src/util/*"],
    }
  },
  "include": ["src/*"],
  "exclude": ["node_modules", "dist"],
}

babel.config.js

const presets = [
  [
    "@babel/preset-env",
    {
      modules: false,
    },
  ],
  "@babel/preset-typescript",
];
const plugins = [["lodash"]];

module.exports = {
  presets,
  plugins,
};

rollup.config.js

const path = require("path");
const RollupPluginHtml = require("@rollup/plugin-html");
const RollupPluginJson = require("@rollup/plugin-json");
const RollupPluginServe = require("rollup-plugin-serve");
const RollupPluginAlias = require("@rollup/plugin-alias");
const RollupPluginBabel = require("@rollup/plugin-babel");
const RollupPluginTerser = require("@rollup/plugin-terser");
const RollupPluginPostcss = require("rollup-plugin-postcss");
const RollupPluginReplace = require("@rollup/plugin-replace");
const RollupPluginCommonjs = require("@rollup/plugin-commonjs");
const RollupPluginLiverLoad = require("rollup-plugin-livereload");
const RollupPluginTypescript = require("@rollup/plugin-typescript");
const RollupPluginNodeResolve = require("@rollup/plugin-node-resolve");

const version = require("./package.json").version;
const extensions = {
  babel: [".ts", ".js"],
  common: [".ts", ".tsx", ".js", ".jsx", ".json", ".css", ".sass", ".scss"],
};
const customResolver = RollupPluginNodeResolve({
  extensions: extensions.common,
});
const customHtmlTemplate = async ({
  attributes,
  files,
  meta,
  publicPath,
  title
}) => {
  const scripts = (files.js || [])
    .map(({ fileName }) => {
      const attrs = RollupPluginHtml.makeHtmlAttributes(attributes.script);
      return `<script src="${publicPath}${fileName}"${attrs}></script>`;
    })
    .join('\n');

  const links = (files.css || [])
    .map(({ fileName }) => {
      const attrs = RollupPluginHtml.makeHtmlAttributes(attributes.link);
      return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
    })
    .join('\n');

  const metas = meta
    .map((input) => {
      const attrs = RollupPluginHtml.makeHtmlAttributes(input);
      return `<meta${attrs}>`;
    })
    .join('\n');

  return `
<!doctype html>
<html${ RollupPluginHtml.makeHtmlAttributes(attributes.html)}>
  <head>
    ${metas}
    <title>${title}</title>
    ${links}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-umd.min.js"></script>
  </head>
  <body>
    ${scripts}
  </body>
</html>`;
};


const rollupPlugins = [
  RollupPluginJson(),
  RollupPluginAlias({
    entries: [
      { find: "util", replacement: path.resolve(__dirname, "src", "util") },
    ],
    customResolver,
  }),
  RollupPluginBabel.babel({
    babelHelpers: "bundled",
    exclude: ["node_modules/**"],
    extensions: extensions.babel,
  }),
  RollupPluginCommonjs(),
  RollupPluginNodeResolve.nodeResolve({
    extensions: extensions.common,
  }),
  RollupPluginTypescript({
    tsconfig: path.resolve(__dirname, "tsconfig.json"),
    cacheDir: ".rollup.tscache",
  }),
  RollupPluginReplace({
    ___VERSION__: version,
    preventAssignment: true,
    __DEV__: process.env.NODE_ENV === "development",
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  }),
  RollupPluginTerser({
    maxWorkers: 4,
  }),
  RollupPluginServe({
    open: true,
    port: 4000,
    contentBase: ["dist"],
  }),
  RollupPluginLiverLoad({
    watch: "dist",
  }),
  RollupPluginPostcss(),
  RollupPluginHtml({
    fileName: "index.html",
    title: "Rollup 通用开发环境",
    template: customHtmlTemplate
  }),
];

module.exports = {
  cache: true,
  input: path.resolve(__dirname, "src", "index.ts"),
  output: {
    file: path.resolve(__dirname, "dist", "index.js"),
    format: "umd",
    banner: `/** Rollup 通用开发环境 版本 v${version} **/`,
    name: "RollupName",
    exports: "auto",
    globals: {
      jquery: "$",
      underscore: "_",
    },
  },
  plugins: rollupPlugins,
  external: ["jquery", "underscore"],
};

命令行

初始化项目: 通过yarn init -y 初始化项目
配置命令行: 通过package.json - scripts 配置命令行
配置rollup命令行

"scripts": {
    "build": "rollup --watch  --config rollup.config.js --environment NODE_ENV:development"
}

替换变量

Rollup 通过 @rollup/plugin-replace 构建产物时替换变量

相关代码

const RollupPluginReplace = require("@rollup/plugin-replace");

RollupPluginReplace({
    ___VERSION__: version,
    preventAssignment: true,
    __DEV__: process.env.NODE_ENV === "development",
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
})

压缩产物

通过@rollup/plugin-terser压缩构建产物

相关代码

const RollupPluginTerser = require("@rollup/plugin-terser");

RollupPluginTerser({
    maxWorkers: 4,
})

支持 Css

通过rollup-plugin-postcss来支持引入.css、.scss、.less等样式文件

相关代码

const RollupPluginPostcss = require("rollup-plugin-postcss");

RollupPluginPostcss()

支持 CDN

通过external将模块保留在bundle外部(忽略打包)
```
external: ["jquery", "underscore"]
```
通过output.globals注册外部依赖的全局变量: 外部依赖 : 全局变量 中, 外部依赖是所引入的依赖包名, 全局变量是该依赖的CDN文件挂载在window上的属性名。
```
external: ["jquery", "underscore"],

output: {
    globals: {
        jquery: "$",
        underscore: "_",
    }
}
```
通过output.format指定生成的bundle格式: 如果需要在html等浏览器用到外部的依赖,需要使用umd或者iife的格式
```
output: {
    format: "iife",
}
```

index.html模版中引入外部依赖的CDN地址

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-umd.min.js"></script>

支持 Alias

Rollup 通过@rollup/plugin-alias和@rollup/plugin-node-resolve来支持路径别名

const RollupPluginAlias = require("@rollup/plugin-alias");
const RollupPluginNodeResolve = require("@rollup/plugin-node-resolve");

const customResolver = RollupPluginNodeResolve({
  extensions: extensions.common,
});

RollupPluginAlias({
    entries: [
    { find: "util", replacement: path.resolve(__dirname, "src", "util") },
    ],
    customResolver,
})

支持 HTML

Rollup 通过@rollup/plugin-html来自动生成HTML模版

相关代码

const RollupPluginHtml = require("@rollup/plugin-html");

const customHtmlTemplate = async ({
  attributes,
  files,
  meta,
  publicPath,
  title
}) => {
  const scripts = (files.js || [])
    .map(({ fileName }) => {
      const attrs = RollupPluginHtml.makeHtmlAttributes(attributes.script);
      return `<script src="${publicPath}${fileName}"${attrs}></script>`;
    })
    .join('\n');

  const links = (files.css || [])
    .map(({ fileName }) => {
      const attrs = RollupPluginHtml.makeHtmlAttributes(attributes.link);
      return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
    })
    .join('\n');

  const metas = meta
    .map((input) => {
      const attrs = RollupPluginHtml.makeHtmlAttributes(input);
      return `<meta${attrs}>`;
    })
    .join('\n');

  return `
<!doctype html>
<html${ RollupPluginHtml.makeHtmlAttributes(attributes.html)}>
  <head>
    ${metas}
    <title>${title}</title>
    ${links}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-umd.min.js"></script>
  </head>
  <body>
    ${scripts}
  </body>
</html>`;
};


RollupPluginHtml({
    fileName: "index.html",
    title: "Rollup 通用开发环境",
    template: customHtmlTemplate
})

支持 Babel

为了能够使用浏览器和 Node.js 尚不支持的最新 JavaScript 特性，许多开发人员会在项目中使用 Babel。需要安装以下依赖:

@babel/core
@babel/preset-env
babel-plugin-lodash
@rollup/plugin-babel
@babel/preset-typescript

安装相关依赖

yarn add @babel/core @babel/preset-env babel-plugin-lodash @rollup/plugin-babel @babel/preset-typescript -D

配置babel

const presets = [
    [
        "@babel/preset-env",
        {
            modules: false,
        },
    ],
    "@babel/preset-typescript",
];
const plugins = [["lodash"]];

module.exports = {
    presets,
    plugins,
};

配置rollup.plugins

const RollupPluginBabel = require("@rollup/plugin-babel");

RollupPluginBabel.babel({
    babelHelpers: "bundled",
    exclude: ["node_modules/**"],
    extensions: extensions.babel,
})

支持 Server

通过rollup-plugin-serve开启本地化服务

相关代码

const RollupPluginServe = require("rollup-plugin-serve");

RollupPluginServe({
    open: true,
    port: 4000,
    contentBase: ["dist"],
})

支持 TypeScript

为了能够使用浏览器和 Node.js 使用TypeScript特性,需要安装以下依赖:

tslib
typescript
@types/node
@rollup/plugin-typescript

Typescript初始化: 根目录执行tsc --init, 生成 tsconfig.json

TypeScript相关配置: 配置如下

{
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "dist",
        "strict": true,
        "newLine": "LF",
        "allowJs": true,
        "types": ["node"],
        "jsx": "preserve",
        "target": "es2015",
        "module": "ESNext",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "moduleResolution": "node",
        "lib": ["es2015", "esnext", "dom"],
        "forceConsistentCasingInFileNames": true,
        "paths": {
            "util/*": ["src/util/*"],
        }
    },
    "include": ["src/*"],
    "exclude": ["node_modules", "dist"],
}

compilerOptions.baseUrl: 项目基础路径
compilerOptions.outDir:
compilerOptions.paths: 用于配置路径别名, 该配置项需要指定baseUrl

rollup配置Typescript插件

const RollupPluginTypescript = require("@rollup/plugin-typescript");

RollupPluginTypescript({
    tsconfig: path.resolve(__dirname, "tsconfig.json"),
    cacheDir: ".rollup.tscache",
})

支持 Livereload

rollup 通过 rollup-plugin-livereload 来支持本地开发环境的热更新

相关代码

const RollupPluginLiverLoad = require("rollup-plugin-livereload");

RollupPluginLiverLoad({
    watch: 'dist',
})

支持 Json Import

rollup 通过 @rollup/plugin-json 来支JSON文件的引入

相关代码

const RollupPluginJson = require("@rollup/plugin-json");

RollupPluginJson()

支持 EsModule Import

rollup 通过 @rollup/plugin-node-resolve 来支EsModule引入方式

相关代码

const RollupPluginNodeResolve = require("@rollup/plugin-node-resolve");

RollupPluginNodeResolve.nodeResolve({
    extensions: extensions.common,
})

支持 CommonJs Import

rollup 通过 @rollup/plugin-commonjs 来支CommonJs引入方式

相关代码

const RollupPluginCommonjs = require("@rollup/plugin-commonjs");

RollupPluginCommonjs()

构建​

src/index.ts​

package.json​

tsconfig.json​

babel.config.js​

rollup.config.js​

命令行​

替换变量​

压缩产物​

支持 Css​

支持 CDN​

支持 Alias​

支持 HTML​

支持 Babel​

支持 Server​

支持 TypeScript​

支持 Livereload​

支持 Json Import​

支持 EsModule Import​

支持 CommonJs Import​

构建

src/index.ts

package.json

tsconfig.json

babel.config.js

rollup.config.js

命令行

替换变量

压缩产物

支持 Css

支持 CDN

支持 Alias

支持 HTML

支持 Babel

支持 Server

支持 TypeScript

支持 Livereload

支持 Json Import

支持 EsModule Import

支持 CommonJs Import