rollup-monaco-bundler

基于 Rollup 实现的 monaco-editor UMD 打包器。

主要特性：

• 以 umd 方式打包，便于将 monaco-editor 相关依赖外置，而不需要混入到主应用程序中。
• 注入 nls 优化，可在 monaco-editor 运行时动态加载多语言包。

该库主要提供三个内容：

• RollupMonacoBundler 用于快速生成 monaco-editor 打包项目环境的 rollup.config.ts
• monacoNlsInject nls 多语言环境注入插件
• cli/download-monaco 用于指定下载不同版本的 monaco-editor 的源代码（基于 npm 仓库）

nls 说明

0.50.0 版本是一个重要的分水岭（monaco-editor 目前版本是 0.52.0）。

0.50.0 以前（包含 0.50.0），nls 是旧机制，对应 nls-0.50.0.js。

0.50.0 以后，nls 采用一套新的机制，但目前这个机制作用依旧等于没有（本地测试还有bug），对应 nls.js。

RollupMonacoBundler 会根据指定的源代码版本，识别对应的 nls 注入包。

众所周知，monaco-editor 和 vscode 是同宗，所以两者的多语言本地化是可以通用的。目前的 nls 注入机制，可以兼容 vscode 的翻译。

多语言示例参考：

zh-cn.js

使用说明

示例项目：

• rollup-monaco-bundler-npm-example
• rollup-monaco-bundler-bun-example

添加包：

bun add rollup-monaco-bundler rollup rollup-plugin-swc3 rollup-plugin-styles
# or
npm install rollup-monaco-bundler rollup rollup-plugin-swc3 rollup-plugin-styles

下载所需的 monaco-editor 的源代码：

# 下载最后的版本 - latest
download-monaco
# 指定版本下载
download-monaco -v 0.50.0
# 指定下载目录
download-monaco -v 0.52.2 -d ./tmp 

修改项目的 rollup.config.js 文件

import { RollupMonacoBundler } from 'rollup-monaco-bundler';

// const version = '0.50.0';
const version = '0.52.2';

const bundler = new RollupMonacoBundler({
  srcDir: `tmp/${version}`,
  outputDir: `dist/${version}`,
});

export default bundler.entries.map(bundler.makeEntryOptions);

在项目根目录添加 tsconfig.json 文件（swc 编译需要），请根据自己编译代码时需要的环境进行调整。

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "target": "ES2022",
    "module": "ES2022",
    "moduleDetection": "force",
    "allowJs": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": false,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  }
}

RollupMonacoBundler 的用法

import { RollupMonacoBundler } from 'rollup-monaco-bundler';

const version = '0.52.2';

const bundler = new RollupMonacoBundler({
  srcDir: `tmp/${version}`,
  outputDir: `dist/${version}`,
  // 生成 swc 配置时候重载默认配置
  onSwcOptions: (opts, entry) => ({
    ...opts,
    minify: false,
  }),
  // 重载生成 css 的配置
  onStylesOptions: (opts, entry) => ({}),
  // 重载每一个 rollup 的 options（每一个 entry 的配置）
  onRollupOptions: (opts, entry) => ({
    ...opts,
  }),
});