fix: fix i18n bundle error (#1346)

* fix: fix i18n bundle error * chore: update * chore: update
2024-11-27 02:01:15 +08:00 · 2021-01-25 16:23:15 +08:00 · 2021-01-25 16:23:15 +08:00 · b1db142ad5
commit b1db142ad5
parent a856c463bb
8 changed files with 168 additions and 101 deletions
--- a/build/build-locale.js
+++ b/build/build-locale.js
@ -30,7 +30,7 @@ fileList
          .replace('define(\"', 'define(\"element/locale/')
          .replace(
            /global\.(\S*) = mod.exports/,
-            'global.ELEMENT.lang = global.ELEMENT.lang || {};\n    global.ELEMENT.lang.$1 = mod.exports.default'
+            'global.ElementPlus.lang = global.ElementPlus.lang || {};\n    global.ElementPlus.lang.$1 = mod.exports.default'
          )

        save(resolve(__dirname, '../lib/umd/locale', `${name}.js`)).write(transformedCode)
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
+const webpack = require('webpack')
 const { VueLoaderPlugin } = require('vue-loader')
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

@ -14,6 +15,11 @@ let externals = [
    },
  },
 ]
+const plugins = [
+  new VueLoaderPlugin(),
+  // new BundleAnalyzerPlugin(),
+]
+let entry = [path.resolve(__dirname, '../packages/element-plus/index.ts')]
 if (!isFullMode) {
  externals.push({
    '@popperjs/core': '@popperjs/core',
@ -24,11 +30,13 @@ if (!isFullMode) {
  },
  /^dayjs.*/,
  /^lodash.*/)
+} else {
+  entry.push(path.resolve(__dirname, '../packages/element-plus/full.ts'))
 }

 const config = {
  mode: 'production',
-  entry: path.resolve(__dirname, '../packages/element-plus/index.ts'),
+  entry,
  output: {
    path: path.resolve(__dirname, '../lib'),
    publicPath: '/',
@ -55,10 +63,7 @@ const config = {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  externals,
-  plugins: [
-    new VueLoaderPlugin(),
-    // new BundleAnalyzerPlugin(),
-  ],
+  plugins,
 }

 module.exports = config
--- a/packages/element-plus/full.ts
+++ b/packages/element-plus/full.ts
@ -0,0 +1,4 @@
+import dayjs from 'dayjs'
+
+// expose Day.js to window to make full bundle i18n work
+(window as any).dayjs = dayjs
--- a/website/docs/en-US/i18n.md
+++ b/website/docs/en-US/i18n.md
@ -10,11 +10,22 @@ import 'dayjs/locale/zh-cn'

 createApp(App).use(ElementPlus, { locale })
 ```
-
-Or if you are importing Element Plus on demand:
+if you are importing Element Plus on demand via **es modules**:

 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/zh-cn'
+import 'dayjs/locale/zh-cn'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+Or if you are importing Element Plus on demand via [babel-plugin-component](#/en-US/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import 'dayjs/locale/zh-cn'
@ -24,8 +35,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // import components
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```

 ### Set Day.js locale
@ -190,41 +201,41 @@ app.use(i18n)
 ### Import via CDN

 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>

 <script>
-  ELEMENT.locale(ELEMENT.lang.zhCn)
+  ElementPlus.locale(ElementPlus.lang.zhCn)
 </script>
 ```

 Compatible with `vue-i18n`

 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>

 <script>
  const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
        // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: 'hello world',
        },
      },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
--- a/website/docs/es/i18n.md
+++ b/website/docs/es/i18n.md
@ -11,10 +11,22 @@ import 'dayjs/locale/es'
 createApp(App).use(ElementPlus, { locale })
 ```

-O si está importando Element Plus a petición:
+O si está importando Element Plus a petición via **es modules**:

 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/es'
+import 'dayjs/locale/es'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+O si está importando Element Plus a petición via [babel-plugin-component](#/es/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/es'
 import 'dayjs/locale/es'
@ -24,8 +36,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // import components
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```

 ### Set Day.js locale
@ -193,42 +205,42 @@ app.use(i18n)
 ### Importar via CDN

 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/es.js"></script>
 <script src="//unpkg.com/dayjs/locale/es.js"></script>

 <script>
-  ELEMENT.locale(ELEMENT.lang.es)
+  ElementPlus.locale(ElementPlus.lang.es)
 </script>
 ```

 Compatible con `vue-i18n`

 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>

 <script>
  // Need translation
  const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
        // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: 'hello world',
        },
      },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
--- a/website/docs/fr-FR/i18n.md
+++ b/website/docs/fr-FR/i18n.md
@ -11,21 +11,33 @@ import 'dayjs/locale/fr'
 createApp(App).use(ElementPlus, { locale })
 ```

-Ou si vous importez Element Plus à la demande:
+Ou si vous importez Element Plus à la demande via **es modules**:

 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/fr'
+import 'dayjs/locale/fr'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+Ou si vous importez Element Plus à la demande via [babel-plugin-component](#/fe-FR/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/fr'
 import 'dayjs/locale/fr'
 import locale from 'element-plus/lib/locale'

-// configure la langue
+// configure language
 locale.use(lang)

-// importe les composants
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+// import components
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```

 ### Set Day.js locale
@ -192,28 +204,42 @@ app.use(i18n)
 ### Import via un CDN

 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/fr.js"></script>
 <script src="//unpkg.com/dayjs/locale/fr.js"></script>

+<script>
+  ElementPlus.locale(ElementPlus.lang.fr)
+</script>
+```
+
+Compatible avec `vue-i18n`
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
+<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
+
 <script>
  // Need translation
  const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
        // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: 'hello world',
        },
      },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
@ -232,21 +258,6 @@ app.use(i18n)
 </script>
 ```

-Compatible avec `vue-i18n`
-
-```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
-<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
-<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
-
-<script>
-  Vue.locale('en', ELEMENT.lang.en)
-  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
-</script>
-```
-
 Actuellement, Element Plus supporte les langues suivantes:

 <ul class="language-list">
--- a/website/docs/jp/i18n.md
+++ b/website/docs/jp/i18n.md
@ -11,10 +11,22 @@ import locale from 'element-plus/lib/locale/lang/ja'
 createApp(App).use(ElementPlus, { locale })
 ```

-または Element Plus をインポートする際は必要に応じて以下の記述します。:
+if you are importing Element Plus on demand via **es modules**:

 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/ja'
+import 'dayjs/locale/ja'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+Or if you are importing Element Plus on demand via [babel-plugin-component](#/jp/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/ja'
 import 'dayjs/locale/ja'
@ -24,10 +36,11 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // import components
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```

+
 ### Set Day.js locale

 Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
@ -196,41 +209,41 @@ app.use(i18n)
 ### CDN を経由してインポート

 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
-<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
+<script src="//unpkg.com/element-plus/lib/umd/locale/jp.js"></script>

 <script>
-  ELEMENT.locale(ELEMENT.lang.en)
+  ElementPlus.locale(ElementPlus.lang.jp)
 </script>
 ```

 `vue-i18n` との互換性

 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>

 <script>
  // need translation
  const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
        // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: 'hello world',
        },
      },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
--- a/website/docs/zh-CN/i18n.md
+++ b/website/docs/zh-CN/i18n.md
@ -1,9 +1,8 @@
 ## 国际化

-Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。以中文为例，在 main.js 中：
+Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。以中文为例，在 main.js 中，如果是完整引入 Element Plus：

 ```javascript
-// 完整引入 Element
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'dayjs/locale/zh-cn'
@ -12,11 +11,22 @@ import locale from 'element-plus/lib/locale/lang/zh-cn'
 createApp(App).use(ElementPlus, { locale })
 ```

-或
+如果是通过 **es modules** 按需引入 Element Plus:

-```javascript
-// 按需引入 Element
-import Vue from 'vue'
+```typescript
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/zh-cn'
+import 'dayjs/locale/zh-cn'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+如果是通过 [babel-plugin-component](#/zh-CN/component/quickstart#on-demand) 插件按需引入 Element Plus:
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import 'dayjs/locale/zh-cn'
@ -26,10 +36,11 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // 引入组件
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```

+
 ### 设置 Day.js 国际化

 Element Plus 直接使用了 [Day.js](https://day.js.org/) 项目的时间日期国际化设置，如月份名称、每周第一天是周几等。并且会自动全局设置已经导入的 Day.js 国际化配置。
@ -188,40 +199,40 @@ app.use(i18n)
 ### 通过 CDN 的方式加载语言文件

 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/es.js"></script>
 <script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>

 <script>
-  ELEMENT.locale(ELEMENT.lang.zhCn)
+  ElementPlus.locale(ElementPlus.lang.zhCn)
 </script>
 ```

 搭配 `vue-i18n` 使用

 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>

 <script>
  const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
        // el 这个属性很关键，一定要保证有这个属性，
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
        // 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
        message: {
          hello: 'hello world',
        },
      },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
        // 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
        message: {
          hello: '你好，世界',