Skip to main content

Rollup

caution
info
  • 不支持 index.js #470
  1. 直接 import {abc} from 'abc/index'
  2. 使用 @rollup/plugin-node-resolve
# 也可以全局安装 - 但是没必要,因为通常依赖其他插件
# npm install --global rollup

# 常用插件
# monorepo 推荐安装在 root 项目
npm add -D rollup @rollup/plugin-{commonjs,node-resolve,replace,typescript,teser}

# 不推荐 Babel
# Babel + Typescript
# yarn add -D @babel/preset-env @babel/preset-typescript
# + React
# yarn add -D @babel/preset-react

# TS
yarn add -D typescript tslib @rollup/plugin-typescript

# rollup
# -f amd, cjs, es, iife, umd, system
rollup -i in.js -f es -p node-resolve -o out.js
FormatFullnameWhenpackage.json
amdAsynchronous Module DefinitionRequireJS
cjs,commonjsCommonJSNodemain
es,esm,module<script type=module>module
iifeself-executing function<script>
Application
umdUniversal Module Definitionamd, cjs, iifebrowser
system,systemjsSystemJSSystemJS

Options

interface Options {
// 判断是否为 外部 依赖
external:
| (string | RegExp)[]
| RegExp
// string 为 module id
| string
// isResolved - id 是否由 插件 resolve
// 可能请求两次 - resolved=false, resolved=true
| ((id: string, parentId: string, isResolved: boolean) => boolean);
}

配置

babel+ts

npm add -D @babel/core @rollup/plugin-babel rollup-plugin-terser @rollup/plugin-node-resolve
export default {
output: {
// 默认 chunk 包含名字
// 支持 [format] 替换
// [name] 为 manualChunks 结果或 this.emitFile 结果
chunkFileNames: '[name]-[hash].js',
entryFileNames: '[name].js', // 入口 - 支持相同的替代逻辑

// 自定义 chunk - 多页分 chunk 加载
manualChunks: {
lodash: ['lodash'], // alias: include 的字符
},
// id 为完整路径
// 例如 将相同语言翻译合并 foo.strings.en.js,bar.strings.en.js -> shared.en.js
manualChunks(id, { getModuleInfo, getModuleIds }) {
if (id.includes('@blueprintjs/')) {
return 'blueprintjs';
}
if (id.includes('node_modules')) {
return 'vendor';
}
return undefined;
},

// 控制生成代码
generatedCode: 'es5', // 默认 es5
generatedCode: {
preset: 'es2015',
arrowFunctions: true,
constBindings: true,
objectShorthand: true,
reservedNamesAsProps: false,
},

// stric, allow-extension, exports-only, false
// false - 不 export
preserveEntrySignatures: 'strict',
},
};

rollup ts

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default [
{
input: './src/standalone.ts',
output: {
file: `dist/standalone.umd.js`,
sourcemap: true,
format: 'umd',
name: 'Standalone',
},
external: [],
plugins: [
nodeResolve(),
commonjs(),
typescript({
tsconfig: 'tsconfig.json',
}),
],
},
];

rollup commonjs

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

function createConfig(format) {
return {
input: 'src/index.ts',
output: {
file: `dist/console-feed.${format}.js`,
sourcemap: true,
format,
},
external: ['react'],
plugins: [
nodeResolve({ browser: true, extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
babel({
babelHelpers: 'bundled',
babelrc: false,
presets: [['@babel/preset-typescript', { allowNamespaces: true }], '@babel/preset-react'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
}),
commonjs({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
],
};
}

export default [createConfig('system'), createConfig('umd')];

babel