Javascript 如何在内置期间有条件地导入不同的文件？ 概述

我有Angular CLI构建的Angular 6应用程序。应用程序是用多种语言编写的。每种语言都有JSON文件，其中包含所有应用程序文本的翻译。文件名是

${language}.json

，例如

en.json

，

es.json

，

pl.json

我想在构建期间设置应用程序的语言-仅用一种语言构建应用程序。对于这个构建，我需要导入一个翻译文件，它的选择取决于我构建的语言

问题 如何有条件地仅为构建期间选择的语言导入单个翻译文件

此外，我希望翻译文件与应用程序的其余JavaScript捆绑在一起，而不是在运行时按需加载

解决方案草图 实际上，上面的代码在Angular 6/Webpack中工作（只需要在

tsconfig.app.json

中设置

compilerOptions.module:'ESNext'

），但不是以我想要的方式。它不是在构建时解析导入并将翻译文件与其余代码捆绑在一起，而是为所有翻译创建单独的文件（块），然后根据JavaScript

lang

变量的值在运行时根据需要加载其中一个文件

那么，如何在构建时而不是运行时解析导入？另外，在构建期间，我在何处以及如何设置

lang

变量，因为我无法访问网页包配置（它隐藏在Angular CLI中）

仅网页包

---

单独使用Webpack时，可以通过使用来实现这一点。但由于Angular CLI隐藏了所有的网页包配置，我不知道如何将其集成到Angular项目中。从Angular CLI中弹出网页包配置是我最后的选择。

作为CLI 6.1版本的一部分，添加了一项功能，允许在生成过程中替换除

.ts

文件以外的其他文件。以前，这用于

环境

和

环境.prod

文件

现在可以使用

angular.json

配置的
fileReplacements
键设置其他文件。据我所知，它应该可以处理资产文件，因此
.json
应该可以工作。它只是最近才添加的，但是您可以查看一些问题/功能细节

让我们知道它是否有效

另外，如果您不想使
angular.json
配置复杂化，您可以创建一个
.js
节点脚本，并在进行构建之前运行它，将语言作为参数传递，并在构建angular bundle之前替换相关的
.json
，条件
导入
只能使用
ESNext
模块标志来完成，该过程将创建一个在运行时导入的块。实际上，在角度绑定/构建之前，您可能需要运行预构建脚本来替换
.json
文件step@Drenai“只能完成”是指使用Angular framework而不弹出网页包配置或通常在网页包中？因为在构建时解析的条件导入可以在Webpack中实现。我只是不知道如何在不弹出整个网页配置的情况下以Angular实现。是的，不弹出。不过，可能还有另一种方法。在Angular CLI v6.1（可能是beta版）中，添加了一个新功能，允许根据我们在构建步骤中提供的配置添加我们自己的
文件替换。它过去只处理
.ts
文件，但它已被更新为可以处理任何文件@Jeffreyroosendal我可以确认它可以工作，但我仍然不知道如何编写这些配置，所以要保留默认的
生产配置
配置，请为每个区域设置创建单独的配置，同时还可以使用
生产
配置构建该区域设置，而不必为
生产
、
生产fr
等复制和粘贴相同的配置块。@RobertKusznier感谢您的确认！我就是这么做的，它工作得很好，只需复制粘贴默认配置并更改一两行即可。为了简化构建，请将此项添加到每个配置中：
“outputPath”：“dist/productionName/”
，并将其添加到package.json的脚本中：
“build:all”：“ng build--configuration=production&&ng build--configuration=productionEn&&ng build--configuration=productionFr
。在终端中键入
npm run build:all
，然后坐下来享受；）我确认它可以工作，但仍在研究如何干净地编写配置。您链接到的问题中的重要一点是，您可能必须更新
@angular devkit/build angular
和
@angular/cli
软件包才能使其正常工作。
const translations = import(`./translations/${lang}.json`);