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", 如何uglify和缩小代码？感谢

Answer 1

我建议重构您的代码以使用Angular CLI，然后使用：

缩小

ng build --prod

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

ng new my-app

然后：

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

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

app.UseDefaultFiles();

在 Startup.cs 中的配置方法中，浏览到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

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

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

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

Uglify并缩小Angular 4代码

1 个答案: