nk2028 / opencc-js

The JavaScript version of Open Chinese Convert (OpenCC)
https://www.npmjs.com/package/opencc-js
MIT License
240 stars 22 forks source link

ES Module and new feature #23

Closed ren1244 closed 1 year ago

ren1244 commented 1 year ago

變更主要為以下四點

瀏覽器的 ES Module

自行託管的話,除了使用原先的 umd,也可以使用 es module

<script type="module">
  import * as OpenCC from './dist/esm/full.js'; //完全版
  import * as OpenCC from './dist/esm/cn2t.js'; //只需要簡轉繁
  import * as OpenCC from './dist/esm/t2cn.js'; //只需要繁轉簡
</script>

字典的表達方式

原先版本在 .CustomConverter 使用二維陣列表達字詞替換的字典;內建 data 卻使用「『空白』與『|』作為分隔符的字串」作為字典。在這個版本把它們都當作是一樣的東西,彼此可以互相替換。

/**
 * 以下兩者是等同的
 * 任何函式能接受其中一個作為參數
 * 就一定能用另一種寫法
 */
const myDict1 = [
  ['香蕉', '🍌️'],
  ['蘋果', '🍎️'],
  ['梨', '🍐️'],
];

const myDict2 = '香蕉 🍌️|蘋果 🍎️|梨 🍐️';

允許在預設字典中新增內容

原先版本自訂字詞只能透過 .CustomConverter 作額外的轉換,這個版本允許把自訂字詞添加到預設的字典內。

PS. 我自己會用到這個功能主要是來自於標點符號的習慣會有些不同,使用 CustomConverter 再作一次轉換的話變成要多掃一次全文。

const customDict = [
  ['“', '「'],
  ['”', '」'],
  ['‘', '『'],
  ['’', '』'],
];
const converter = OpenCC.ConverterFactory(
  OpenCC.Locale.from.cn,                   //中國大陸 => OpenCC 標準
  OpenCC.Locale.to.tw.concat([customDict]) //OpenCC 標準 => 臺灣+自訂
);
console.log(converter('悟空道:“师父又来了。怎么叫做‘水中捞月’?”'));
// output: 悟空道:「師父又來了。怎麼叫做『水中撈月』?」

打包能得到更小的檔案

這個版本和原先版本一樣,在 node 中可以透過 import 引用 opencc-js

import * as OpenCC from 'opencc-js';

const converter = OpenCC.Converter({from: 'tw', to: 'cn'});
console.log(converter('漢語'));

但如果把這樣的程式碼打包,出來的檔案是包含所有的字典資料,檔案較大。

在這個版本,重新設計了結構,允許使用者使用模組較底層的元件打包出較小的檔案。只要改用下列寫法,打包工具就能使用 Tree Shaking 讓檔案只匯出需要的的部分。

//這段程式用 rollup 打包出來大小不到 100k。
import * as OpenCC from 'opencc-js/core'; //核心程式碼,相當以前的 main.js
import * as Locale from 'opencc-js/preset'; //預設的字典資料,相當於以前那些 data

const converter = OpenCC.ConverterFactory(Locale.from.tw, Locale.to.cn);
console.log(converter('漢語'));

註:雖然 opencc-js/preset 包含了全部的資料,但打包工具會自動移除沒用到的部分。

ayaka14732 commented 1 year ago

Need to fix tests