共计 2246 个字符，预计需要花费 6 分钟才能阅读完成。
本例子将使用在 angular 中引入 moment.js，使用 webpack 配置多语言开发环境
使用 Angular CLI 创建一个新的 Angular 应用程序：
1 | <table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-comment"># Install the Angular CLI globally</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"><span class="hljs-variable">$ </span>npm i <span class="hljs-variable">@angular</span>/cli -g</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"><span class="hljs-comment"># Create a new Angular project with a name of your choosing && change directory</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-variable">$ </span>ng new AngularCustomWebpackConfig</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7">> N</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">> SCSS</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"><span class="hljs-variable">$ </span>cd AngularCustomWebpackConfig</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"><span class="hljs-comment"># Open this up in VS Code and Serve</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"><span class="hljs-variable">$ </span>code . && ng serve</td></tr></tbody></table> |
依赖
为了使用自定义的 webpack 配置，我们需要 @angular-builders/custom-webpack 依赖项。devDependency像这样将其添加到您的项目中：
1 | <span class="hljs-variable">$ </span>npm i <span class="hljs-variable">@angular</span>-builders/custom-webpack -D |
然后，我们可以安装 moment 到我们的项目并将其导入我们的项目：
1 | $ npm i moment <span class="hljs-comment">--save</span> |
自定义 Webpack 配置
然后，我们可以创建一个自定义的 Webpack 配置，以剔除我们没有特别选择保留的所有语言环境。
在项目根目录中，创建一个新文件，名称 custom-webpack.config.js 如下：
1 | <table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-type">const</span> <span class="hljs-variable">MomentLocalesPlugin</span> <span class="hljs-operator">=</span> require(<span class="hljs-string">'moment-locales-webpack-plugin'</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-keyword">module</span>.<span class="hljs-keyword">exports</span> = {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> plugins: [</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MomentLocalesPlugin</span>({localesToKeep: [<span class="hljs-string">'fr'</span>]</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> ]</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8">};</td></tr></tbody></table> |
这需要我们安装moment-locales-webpack-plugin：
1 | <span class="hljs-variable">$ </span>npm i moment-locales-webpack-plugin -D |
将此添加到 angular.json
之后，我们需要进行配置 angular.json 以使用此新配置。在 architect/build 对象内部，将 builderfrom 更新@angular-devkit/build-angular:browser 为@angular-builders/custom-webpack:browser并添加 customWebpackConfig 密钥：
1 | <table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-attr">"architect"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> <span class="hljs-attr">"build"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> <span class="hljs-attr">"builder"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@angular-builders/custom-webpack:browser"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-attr">"options"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> <span class="hljs-attr">"customWebpackConfig"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-attr">"path"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./custom-webpack.config.js"</span><span class="hljs-punctuation">,</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> <span class="hljs-attr">"replaceDuplicatePlugins"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"> <span class="hljs-punctuation">}</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"><span class="hljs-punctuation">}</span></td></tr></tbody></table> |
使用 ng 服务时的自定义 Webpack 配置
如果我们只希望最终的，内置的应用程序使用 webpack 配置，那么这就是我们需要做的所有事情。但是，如果我们想在使用时测试此配置ng serve，我们还有另一件事要做。
从以下位置安装 @angular-builders/dev-server 自定义 Web 服务器npm：
1 | <span class="hljs-variable">$ </span>npm i <span class="hljs-variable">@angular</span>-builders/dev-server -D |
然后，我们可以 serve/builder 在angular.json文件中对其进行更新：
1 | <span class="hljs-string">"serve"</span>: {<span class="hljs-string">"builder"</span>: <span class="hljs-string">"@angular-builders/custom-webpack:dev-server"</span>} |
测试
让我们检查一下它是否按预期工作！前往 app.component.ts 并将语言环境设置为fr
1 | <table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, <span class="hljs-title class_">OnInit</span>} <span class="hljs-keyword">from</span><span class="hljs-string">'@angular/core'</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> moment <span class="hljs-keyword">from</span> <span class="hljs-string">'moment'</span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"><span class="hljs-meta">@Component</span>({</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-attr">selector</span>: <span class="hljs-string">'app-root'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">'./app.component.html'</span>,</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-attr">styleUrls</span>: [<span class="hljs-string">'./app.component.scss'</span>]</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">})</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AppComponent</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">OnInit</span> {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"> <span class="hljs-attr">currentTimeFRLocale</span>: <span class="hljs-built_in">string</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"> <span class="hljs-title function_">ngOnInit</span>(): <span class="hljs-built_in">void</span> {moment.<span class="hljs-title function_">locale</span>(<span class="hljs-string">'fr'</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentTimeFRLocale</span> = <span class="hljs-title function_">moment</span>().<span class="hljs-title function_">format</span>(<span class="hljs-string">'LLL'</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"> }</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16">}</td></tr></tbody></table> |
然后我们可以在里面显示app.component.html：
大。fr正如我们特别告诉我们的那样，我们可以在语言环境中查看当前日期和时间，并将 moment 其保留在插件中。
让我们从中删除它，custom-webpack.config.js然后选择其他语言环境：
1 | <table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">module</span>.<span class="hljs-keyword">exports</span> = {</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> plugins: [</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MomentLocalesPlugin</span>({localesToKeep: [<span class="hljs-string">'de'</span>]</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> })</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> ]</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6">};</td></tr></tbody></table> |
您需要使用重新启动应用 ng serve 程序才能更新应用程序。
语言环境已从捆绑包中消失了！您还将注意到，使用这种额外的配置，捆绑包的大小要比不使用捆绑包的情况小得多。
这是没有配置的结果：
1 | chunk {<span class="hljs-selector-tag">main</span>} <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span>, <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span><span class="hljs-selector-class">.map</span> (<span class="hljs-selector-tag">main</span>) <span class="hljs-number">22.6</span> kB <span class="hljs-selector-attr">[initial]</span> <span class="hljs-selector-attr">[rendered]</span> |
这里的结果 与配置：
1 | chunk {<span class="hljs-selector-tag">main</span>} <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span>, <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span><span class="hljs-selector-class">.map</span> (<span class="hljs-selector-tag">main</span>) <span class="hljs-number">10.2</span> kB <span class="hljs-selector-attr">[initial]</span> <span class="hljs-selector-attr">[rendered]</span> |
正文完
