rollup

[magicdawn]

Links

• https://github.com/egoist/blog/blob/master/source/_posts/bundle-front-end-js-library.md
• https://github.com/egoist/blog/blob/master/source/_posts/bili.md

[magicdawn]

打包 async-await

配置

export default {
    input: 'index.js',
    external: ['axios'],
    plugins: [
        require('rollup-plugin-node-resolve')(),
        require('rollup-plugin-commonjs')(),
        require('rollup-plugin-buble')(),
        require('rollup-plugin-replace')({
            'process.env.NODE_ENV': `'development'`,
            'process.env.BUILD': `'test'`,
        }),
        // require('rollup-plugin-async')(),
        // require('rollup-plugin-regenerator')({
        //     includeRuntime: false
        // }),
    ],
    output: { file: 'dist/test.cjs.js', format: 'cjs' }
}

文件

'use strict';

require('axios');

var lib = async function name(params) {
    return
};

var fn = function (ref) {
    var x = ref.x;
    var y = ref.y;

    console.log(x, y);
};
lib.fn = fn;

var demo1 = lib;

module.exports = demo1;

• 不转义 async / await - 236B
• 是由 async-to-generator - 470B
• regenerator - 24K
• regenerator， includeRuntime: false - 553B

rollup-plugin-regenerator

• includeRuntime: false 关闭 runtime, dist 文件会引用 global.regeneratorRuntime
• 包 regenerator-runtime/runtime 会设置 global.regeneratorRuntime
• 包 babel-polyfill 会包含 regenerator-runtime/runtime https://github.com/babel/babel/blob/9d2d499760b72c101e77ada84b18dc5ff5dd7b77/packages/babel-polyfill/src/index.js#L7

---

使用 nodent , 打开 promise, 编译出的代码需要 Promise 全局变量, 但是可读性强多了

const pkg = require('./package.json')

// require('rollup-plugin-async')(),
// require('rollup-plugin-regenerator')(),

module.exports = {
	input: 'index.js',
	external: ['axios'],
	plugins: [
		require('rollup-plugin-node-resolve')(),
		require('rollup-plugin-commonjs')(),
		require('rollup-plugin-buble')({
			transforms: {
				dangerousForOf: true,
			},
		}),
		require('rollup-plugin-nodent')({
			sourcemap: true,
			promises: true,
			noRuntime: true,
			wrapAwait: true,
			// engine: true
		}),
	],
	output: {
		file: pkg.browser,
		format: 'cjs',
	},
}

[magicdawn]

output -> commonjs

source

module.exports = blabla
module.exports.x = y

output

exports.default = blabla
exports.x = y

配合 babel 的 import 刚好

babel-source

import x from 'x'
x.y()

babel output

'use strict';

var _x = require('x');

var _x2 = _interopRequireDefault(_x);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_x2.default.y();

• 前端使用 dist 文件, 使用 import 即可
• node / browser 使用 require(xx).default

[magicdawn]

Plugins

@rollup/plugin-node-resolve

rollup 自己是不能读取 node_modules, 只有使用了这个插件才能像 node.js 那样去 node_modules 里去 resolve import

• https://www.npmjs.com/package/@rollup/plugin-node-resolve
• https://github.com/rollup/plugins/tree/master/packages/node-resolve

@rollup/plugin-commonjs

支持使用 commonjs module

• https://www.npmjs.com/package/@rollup/plugin-commonjs
• https://github.com/rollup/plugins/tree/master/packages/commonjs/#readme

defaultIsModuleExports

在 esm 中 import x from cjs, x 的值是否是 module.exports

requireReturnsDefault

[magicdawn]

TypeScript

候选对比
https://www.npmtrends.com/@wessberg/rollup-plugin-ts-vs-rollup-plugin-esbuild-vs-rollup-plugin-typescript2-vs-rollup-plugin-typescript

@rollup/plugin-typescript

这个官方包太蠢了,
基本原理: 使用 tsc 做全量编译, 然后 plugin 根据 ts 文件名, 找到编译好的 js 文件,
经常出现找不到的情况, 具体看他的 issues, 里面一堆基础使用报错的....
由于最基本的使用 plugins: [ts()] 出现了报错, 报错不认识 ts, 去看了他的代码
就是在 monorepo 中使用, tsConfig 指定了 outDir, 他这个机制(全量编译, 根据文件名匹配)就出问题了.

rollup-plugin-typescript2 / @wessberg/rollup-plugin-ts

估计是被官方包蠢哭, 另行维护的, 未尝试.

rollup-plugin-esbuild

体验较好.

[magicdawn]

Rollup Plugin Dev

Hooks

https://rollupjs.org/guide/en/#build-hooks