小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Rollup从0到1上手前端组件库开发 | external属性

上文回顾

• Rollup从0到1上手前端组件库开发 | 起步
• Rollup从0到1上手前端组件库开发 | 模块构建
• Rollup从0到1上手前端组件库开发 | tree-shaking 机制

External 属性

在模块构建中我们虽然使用了 resolve 插件来使用第三方模块,但是我们在某些场景下,仍然希望某些库保持外部引用状态, 这种情况下, 我们就需要使用 external属性, 来告诉 rollup.js 哪些是外部的类库。

举个例子: 我想在我的组件库中使用 decimal.js 浮点数计算库, 但是我想通过外部引用的方式来使用它~

上代码

yarn add lodash

vim /src/index.js

import {Decimal} from 'decimal.js';

// 计算 0.3 - 0.1
const minusComputed = (x, y) => {
    return x.minus(y)
}
let x = new Decimal(0.3)
let y = new Decimal(0.1)
console.log(minusComputed(x, y));

export default minusComputed

输出结果

npx babel-node ./src/index.js

0.2

设为外部引用

虽然使用tree-shaking来按需加载lodash,但是我仍然希望,decimal.js是完全从外部引用进来的

vim ./rollup.config.dev.js

const path = require('path')
const resolve = require("rollup-plugin-node-resolve")

const inputPath = path.resolve(__dirname, "./src/index.js") // 输入路径
const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // 输出路径
const outputEsPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.es.js") // 输出路径

module.exports = {
    input: inputPath,
    output: [
        {
            file: outputUmdPath, // 输出路径
            format: 'umd', // 输出的模块协议 umd
            name: "payfunRollbear" // 模块名称
        },
        {
            file: outputEsPath, // 输出路径
            format: 'es', // 输出的模块协议 es
            name: "payfunRollbear" // 模块名称
        }
    ],
    plugins:[
        resolve()
    ],
    // 新增代码
    external:['decimal.js'] , // 表示哪些模块是外部引用, 即使开启了 resolve 这里面的模块仍然是外部引用
}

查看代码编译结果

yarn dev

vim /dist/payfun.rollbear.dev.es.js

使用 external 前

/* * decimal.js v10.3.1 * An arbitrary-precision Decimal type for JavaScript. * https://github.com/MikeMcl/decimal.js * Copyright (c) 2021 Michael Mclaughlin <M8ch88l@gmail.com> * MIT Licence */

// 此处省略上千行代码
// ....

function trunc(x) {
  return finalise(x = new this(x), x.e + 1, 1);
}


P[Symbol.for('nodejs.util.inspect.custom')] = P.toString;
P[Symbol.toStringTag] = 'Decimal';

// Create and configure initial Decimal constructor.
var Decimal = P.constructor = clone(DEFAULTS);

// Create the internal constants from their string values.
LN10 = new Decimal(LN10);
PI = new Decimal(PI);

// 计算 0.3 - 0.1
const minusComputed = (x, y) => {
    return x.minus(y)
};
let x = new Decimal(0.3);
let y = new Decimal(0.1);
console.log(minusComputed(x, y));

export { minusComputed as default };

使用 external 后

import { Decimal } from 'decimal.js';

// 计算 0.3 - 0.1
const minusComputed = (x, y) => {
    return x.minus(y)
};
let x = new Decimal(0.3);
let y = new Decimal(0.1);
console.log(minusComputed(x, y));

export { minusComputed as default };

当项目中如果依赖(使用)VUE~那么直接external它

 external:['vue']