关于javascript:reactvue国际化方案webpack插件webpacki18nplugin

前言

前端我的项目 react/vue 国际化个别都须要开发者一一去实现，耗时耗力，相干文档能够参考：

1. vue-i18n 文档
2. react-intl 国际化 文档指引

webpack-i18n-plugin 插件次要解决了两个痛点问题, 实用于 vue、react 我的项目

• 提取我的项目中的国际化资源文件

  在 webpack 中配置插件 (webpack-i18n-plugin)，即可提取出中文资源

• 增加国际化代码

  增加 plugins，编译后主动增加国际化全局办法 $i8n，对源码无污染

具体应用办法如下：

装置

npm install webpack-i18n-plugin -D

webpack plugins 配置

const i18nPlugin = require("webpack-i18n-plugin");

// webpack.config.js
plugins: [
  ...
  new i18nPlugin(i18nConfig),
  ...
]

// vue.config.js
chainWebpack: (config) => {config.plugin("i18n").use(i18nPlugin).tap((options) => {return [...options, i18nConfig];
  });
}

babel plugins 配置

// .babelrc | babel.config.js

plugins:[
  ...
  "webpack-i18n-plugin/babel"
]

插件配置项 i18nConfig

const i18nConfig = {i18nDir: path.resolve(__dirname, "./i18n"), // 国际化目录（可选）translation: {en_US: [path.resolve(__dirname, "翻译文件.xlsx")], //en_US 语言包
    ...
  },
};