前端国际化的思考与实践

写在开头

之前一直听别人在后台模板中或者博客模板中提到国际化，i18n等，但是自己只是百度谷歌浏览了解一下，并未深入，直到上月公司开始拓展海外市场。我这边就提前考虑到业务这边会有国际化的需求，就开始进行详细的技术调研。

官网英文版

最开始是想把公司的主产品的官网进行英文版改造。官网是php+webpack+html+css+jq进行开发的。

当时的第一个思路是在git上且一个语言分支，通过jquery-i18n库进行改造，两个分支的language配置不同就行了。但是后来想了一下，这样如果有更新，分支同步也挺麻烦，总是需要改动language配置。

然后就有了第二个思路，因为反正官网也不需要把切换语言环境的功能放在主页上，而是不同的语言版本都投放到特定的渠道上，就通过编译命令传参的方式将不同的环境通过编译命令传入到编译后的包中。

这里就需要解决两个问题，一是编译命令传参，一是webpack注入全局变量。

webpack注入全局变量，在我之前的文章中有提到，感兴趣的可以去翻一翻。这里贴一下编译命令传参，其实也很简单：

 // 1、通过--argv=value来传递参数// 2、通过cross-env CONST_ARGV=value来传递参数"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:cn": "npx webpack --config build/webpack.config.js --mode production --
1
2