当前位置：网站首页>【入门教程】Rollup模块打包器整合

【入门教程】Rollup模块打包器整合

2022-08-01 02:31:00 【小鑫同学】

Rollup 是一个用于 JavaScript 的模块打包器，它将小段代码编译成更大更复杂的东西，例如库或应用程序。它对 JavaScript 的 ES6 修订版中包含的代码模块使用新的标准化格式，而不是以前的特殊解决方案，例如 CommonJS 和 AMD。 ES 模块让您可以自由无缝地组合您最喜欢的库中最有用的单个函数。这最终将在任何地方本地实现，但 Rollup 让您今天就可以做到。————《rollupjs.org》

特点：

  1. 选用ES6标准模块化格式；
  2. 支持静态分析导入代码进行Tree-Shaking。

兼容：

  1. 支持导入CommonJs模块；
  2. 方便使用到CommonJS模块的工具，如：Node.js、webpack。

ES 模块语法：

思维导图地址：es模块语法

快速开始：

常见编译输出风格：

命名风格适用
iife立即执行函数浏览器
cjsCommonJsNodeJs
umd通用模块定义浏览器/NodeJs

编译案例演示：

rollup采用ES6标准模块化格式

定义一个待编译的ES6模块：

// 文件名：main.js
const main = {
    hello: () => {
        console.log('Hello');
    },
    world: () => {
        console.log('World');
    },
};
export default main;

编译为IIFE风格：

命令示例：
rollup <入口文件> --file <输出文件> --name <输出模块名称> --format <输出模块类型>

注意：name为推荐选项，未指明打包后的模块名称，虽然打包产物可以正常加载但无法触发执行。

编译命令：
rollup .\main.js --file bundle.iife.js --name myBundle --format iife
输出产物：
// 文件名：bundle.iife.js
var myBundle = (function () {
    'use strict';

    const main = {
        hello: () => {
            console.log('Hello');
            return 'Hello';
        },
        world: () => {
            console.log('World');
            return 'World';
        },
    };

    return main;

})();
在浏览器中使用：
<head>
    <script src="../bundle.iife.js"></script>
</head>

<body>
    <script>
        myBundle.hello();
    </script>
</body>

编译为CJS风格：

命令示例：
rollup <入口文件> --file <输出文件> --exports <导出模式> --format <输出模块类型>

注意：exports为推荐选项，当使用默认导出时将抛出警告，建议使用命名导出。

编译命令：
rollup .\main.js --file bundle.cjs.js --exports auto --format cjs
输出产物：
// 文件名：bundle.cjs.js
'use strict';

const main = {
    hello: () => {
        console.log('Hello');
    },
    world: () => {
        console.log('World');
    },
};

module.exports = main;
在Node环境中使用：
const main = require('../bundle.cjs.js');
console.log(main.hello());

编译为UMD风格：

命令示例：
rollup <入口文件> --file <输出文件> --name <输出模块名称> --format <输出模块类型>

注意：name为必填项，缺少后将抛出异常，打包产物在没有模块加载的环境将无法使用。

编译命令：
rollup main.js --file bundle.umd.js  --name myBundle --format umd
输出产物：
// 文件名：bundle.umd.js
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.myBundle = factory());
})(this, (function () { 'use strict';

    const main = {
        hello: () => {
            console.log('Hello');
        },
        world: () => {
            console.log('World');
        },
    };

    return main;

}));
在浏览器中使用：
<head>
    <script src="../bundle.umd.js"></script>
</head>

<body>
    <div id="content"></div>
    <script>
        const output = myBundle.hello();
        document.getElementById("content").innerHTML = output
    </script>
</body>
在Node环境中使用：
const main = require('../bundle.umd.js');
console.log(main.hello());

使用配置文件：

虽然在命令行可以完成大量的编译配置，但是同样提供了通过配置文件的方式来进行简化。

使用配置文件说明：

  1. 使用ES6模块导出风格编写配置文件：建议将扩展名修改成.mjs，执行期间会快速转换为CommonJS使用。
  2. 使用CommonJs模块导出风格编写配置文件：将扩展名修改成.cjs，NodeJs13+将阻止Rollup进行转义。
  3. 使用ts来编写配置文件：需要在执行命令时指定configPlugin为typescript。

典型配置文件：

下面是一个典型的使用ES6模块默认导出风格的配置，将main.js文件编译为CommonJs模块风格，输出到bundle.js中。

// 文件名称：rollup.config.js
export default {
    input: 'main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs',
        exports: 'auto'
    },
};

多入口，多出口配置文件：

下面是一个支持同时编译多个入口文件，且支持同时编译成多种模块风格的参考配置：

export default [
  {
    input: 'main-a.js',
    output: {
      file: 'dist/bundle-a.js',
      format: 'cjs'
    }
  },
  {
    input: 'main-b.js',
    output: [
      {
        file: 'dist/bundle-b1.js',
        format: 'cjs'
      },
      {
        file: 'dist/bundle-b2.js',
        format: 'es'
      }
    ]
  }
];

异步创建配置文件：

支持我们通过异步的形式创建配置文件，例如我们的配置文件放置在云端，我们就可以通过fetch来获取不同的配置后再进行编译：

import fetch from 'node-fetch';
export default fetch('<某个远程服务或文件返回实际配置>');

// or
export default Promise.all([fetch('get-config-1'), fetch('get-config-2')]);

使用配置文件：

通过命令的config选项来指明配置文件。

显示执行
rollup --config my.config.js
隐式执行

执行顺序：rollup.config.mjs -> rollup.config.cjs -> rollup.config.js

rollup --config

自定义命令行选项：

在下面的配置文件中我们导入了两份提前写好的不同环境的配置文件，我们通过接收命令行传入的“configDebug”选项来选择使用哪一个配置文件进行执行。默认情况下命令行传入的选项的优先级最高，当然也可以在解析到传入的选项后进行拦截删除。

// rollup.config.js
import defaultConfig from './rollup.default.config.js';
import debugConfig from './rollup.debug.config.js';

export default commandLineArgs => {
  if (commandLineArgs.configDebug === true) {
    return debugConfig;
  }
  return defaultConfig;
};

编程提示：

Rollup附带了TypeScript类型，可以通过IDE的智能提示和JSDoc进行编写时的提示。也可以使用Rollup提供的帮助程序完成，如下：

// rollup.config.js
import { defineConfig } from 'rollup';

export default defineConfig({
  // ...
});

Node 13+注意事项：

  1. 只能从 CommonJS 插件中获得默认导出；
  2. 无法直接导入 JSON 文件使用； 
// load-package.cjs
module.exports = require('./package.json');

// rollup.config.mjs
import pkg from './load-package.cjs';
...

配置大全：

下面是摘录自rollupjs.org，的配置大全：

export default {
  // 核心输入选项
  external,
  input, // conditionally required
  plugins,

  // 高级输入选项
  cache,
  onwarn,
  preserveEntrySignatures,
  strictDeprecations,

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

  // 实验性的配置
  experimentalCacheExpiry,
  perf,

  // 必需的(可以是一个数组，用于多个输出)
  output: {
    // 核心输出选项
    dir,
    file,
    format, // required
    globals,
    name,
    plugins,

    // 高级输出选项
    assetFileNames,
    banner,
    chunkFileNames,
    compact,
    entryFileNames,
    extend,
    footer,
    hoistTransitiveImports,
    inlineDynamicImports,
    interop,
    intro,
    manualChunks,
    minifyInternalExports,
    outro,
    paths,
    preserveModules,
    preserveModulesRoot,
    sourcemap,
    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
  }
};

命令行参数大全：

下面是摘录自rollupjs.org，的命令行参数大全：

简写命令参数用途
-c--configfilenameUse this config file (if argument is used but valueis unspecified, defaults to rollup.config.js)
-d--dirdirnameDirectory for chunks (if absent, prints to stdout)
-e--externalidsComma-separate list of module IDs to exclude
-f--formatformatType of output (amd, cjs, es, iife, umd, system)
-g--globalspairsComma-separate list of moduleID:Globalpairs
-h--helpShow this help message
-i--inputfilenameInput (alternative to )
-m--sourcemapGenerate sourcemap (-m inlinefor inline map)
-n--namenameName for UMD export
-o--fileoutputSingle output file (if absent, prints to stdout)
-p--pluginpluginUse the plugin specified (may be repeated)
-v--versionShow version number
-w--watchWatch files in bundle and rebuild on changes
--amd.ididID for AMD module (default is anonymous)
--amd.autoIdGenerate the AMD ID based off the chunk name
--amd.basePathprefixPath to prepend to auto generated AMD ID
--amd.definenameFunction to use in place of define
--assetFileNamespatternName pattern for emitted assets
--bannertextCode to insert at top of bundle (outside wrapper)
--chunkFileNamespatternName pattern for emitted secondary chunks
--compactMinify wrapper code
--contextvariableSpecify top-level thisvalue
--entryFileNamespatternName pattern for emitted entry chunks
--environmentvaluesSettings passed to config file (see example)
--no-esModuleDo not add __esModule property
--exportsmodeSpecify export mode (auto, default, named, none)
--extendExtend global variable defined by --name
--no-externalLiveBindingsDo not generate code to support live bindings
--failAfterWarningsExit with an error if the build produced warnings
--footertextCode to insert at end of bundle (outside wrapper)
--no-freezeDo not freeze namespace objects
--no-hoistTransitiveImportsDo not hoist transitive imports into entry chunks
--no-indentDon't indent result
--no-interopDo not include interop block
--inlineDynamicImportsCreate single bundle when using dynamic imports
--introtextCode to insert at top of bundle (inside wrapper)
--minifyInternalExportsForce or disable minification of internal exports
--namespaceToStringTagCreate proper .toStringmethods for namespaces
--noConflictGenerate a noConflict method for UMD globals
--outrotextCode to insert at end of bundle (inside wrapper)
--preferConstUse constinstead of varfor exports
--no-preserveEntrySignaturesAvoid facade chunks for entry points
--preserveModulesPreserve module structure
--preserveModulesRootPut preserved modules under this path at root level
--preserveSymlinksDo not follow symlinks when resolving files
--no-sanitizeFileNameDo not replace invalid characters in file names
--shimMissingExportsCreate shim variables for missing exports
--silentDon't print warnings
--sourcemapExcludeSourcesDo not include source code in source maps
--sourcemapFilefileSpecify bundle position for source maps
--stdin=extSpecify file extension used for stdin input
--no-stdinDo not read "-" from stdin
--no-strictDon't emit "use strict";in the generated modules

编译完整版流程：

准备基础环境：

  1. 安装rollup，并使用rollup命令验证；
  2. 创建目录，准备内容； 
src
├─── main.js
└─── foo.js
// src/main.js
import foo from './foo.js';
export default function () {
    console.log(foo);
}
// src/foo.js
export default 'hello world!';
  1. 只编译，不输出到文件：

执行命令：rollup src/main.js -f cjs

// 输出内容
'use strict';

var foo = 'hello world!';

function main () {
    console.log(foo);
}

module.exports = main;
  1. 编译并输出到bundle文件：

执行命令：rollup src/main.js -o bundle.js -f cjs

// 输出内容
'use strict';

var foo = 'hello world!';

function main () {
    console.log(foo);
}

module.exports = main;
  1. 在node中使用这个bundle文件： 
node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'

使用配置文件：

创建rollup.config.js配置文件，执行命令缩短为：rollup -c。

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

使用插件：

awesome

为了安装插件需要更新项目环境:

  1. 初始化目录：npm init -y；
  2. 安装处理JSON文件的开发依赖：@rollup/plugin-json；

更新main.js，支持读取package.json：

import { version } from '../package.json';

export default function () {
  console.log('version ' + version);
}

更新配置文件，配置安装的@rollup/plugin-json插件：

// rollup.config.js
import json from '@rollup/plugin-json';

export default {
  ...
  plugins: [json()]
};

再次编译并在node中使用：

编译后的产物将只包含使用到得version，体现了Tree-Shaking的作用。

'use strict';

var version = "1.0.0";

function main () {
    console.log('version ' + version);
}

module.exports = main;
node
> var myBundle = require('./bundle.js');
> myBundle();
version 1.0.0

使用针对输出的插件：

使用rollup-plugin-terser插件对输出内容压缩：

// rollup.config.js
import json from '@rollup/plugin-json';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/main.js',
    output: [
        {
            file: 'bundle.js',
            format: 'cjs',
        },
        // 针对iife风格的输出处理
        {
            file: 'bundle.min.js',
            format: 'iife',
            name: 'version',
            plugins: [terser()],
        },
    ],
    plugins: [json()],
};

iife风格的输出产物将被压缩成一行：

var version=function(){"use strict";return function(){console.log("hello world!"),console.log("version 1.0.0")}}();
原网站

版权声明
本文为[小鑫同学]所创，转载请带上原文链接，感谢
https://mdnice.com/writing/ec0c7c41e26e4603be5080ef0daa3c25

边栏推荐

猜你喜欢

随机推荐