丑化和缩小 Angular 4 代码

Question

我在 VS 2017 中使用 Asp Core +Angular 4 模板 + webpack。 我已经发布了我的应用程序..并查看 ClientApp/dist/main-server.js 我看到内容不是 uglify 和 minify..它是这样的

    ...
ConfirmComponent.prototype.ngAfterViewInit = function () {
            try {
                $('.modal').removeClass('fade'); 
                setTimeout(function () {
                    $('.modal').addClass('fade');
                }, 500);
            }
            catch (exception) { }
        };
...

在 webpack.config.vendor.js 我可以看到一个插件调用：

.... 
  plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()   //HERE
        ])
    });
....

在 package.json 我添加了："uglifyjs-webpack-plugin": "1.0.1", 如何丑化和缩小代码？ 谢谢

Answer 1

我建议重构您的代码以使用 Angular CLI，然后使用以下命令进行缩小：

ng build --prod

使用 .net 核心上的 Web API 项目，一旦你创建一个新的 Angular 应用程序（从与你的解决方案 (sln) 文件相同的目录运行它：

ng new my-app

然后：

• 在 angular-cli.json 中，将 outDir 更改为 wwwroot
• 在 tsconfig.json 中，将 outDir 更改为 ./wwwroot/out-tsc

此时，ng build 会将所有内容发布到 wwwroot，所以只要包括：

app.UseDefaultFiles();

在 Startup.cs 的 Configure 方法中，浏览到 API 的根目录将显示您的 Angular 应用。

另外，我喜欢包含一个名为 proxy.config.json 的代理文件，它看起来像这样（将端口替换为您的 API 端口）：

{
  "/api/*": {
    "target": "http://localhost:12345",
    "secure": false,
    "logLevel": "debug"
  }
}

然后，我修改 package.json 中的 start 脚本，如下所示：

"start": "ng serve --proxy-config proxy.config.json"

此时，您可以调试您的 API，只需从命令行运行 npm start，充分利用 Angular CLI。然后，当你想释放时，运行：

ng build --prod

此外，您可以在构建 Web API 项目时修改 .csproj 文件以构建和缩小 Angular 应用程序，如下所示：

<Target Name="Build Angular" BeforeTargets="Build">
  <Message Text="* * * * * * Building Angular App * * * * * *" Importance="high" />
  <Exec Command="ng build --prod" />
</Target>

我个人认为 Angular 是一个全面的框架。我看不出将它与 Razor 一起使用的价值。如果您想要渐进式增强，请使用 React！