angular搭建项目步骤

by Ashish Gaikwad

通过Ashish Gaikwad

建立健康的Angular项目应采取的步骤 (Steps you should take to build a healthy Angular project)

使用Jenkins + SonarQube创建您的“ Angular Fitbit” (Create your “Angular Fitbit” with Jenkins + SonarQube)

Just like the recent introduction of wearables to track our health, the software industry has long followed the practice of monitoring the health of software projects. The most common processes applied are unit tests, integration tests, continuous integration, and code coverage.

就像最近引入可穿戴设备来跟踪我们的健康状况一样，软件行业也长期遵循监视软件项目健康状况的做法。 应用最常见的过程是单元测试，集成测试，连续集成和代码覆盖率。

I recently struggled a bit in trying to setup the above mentioned processes for our project, so I wrote this post to document my experience. Since TypeScript is the default language for Angular 2 projects, existing JS setups do not work.

我最近在尝试为我们的项目设置上述流程时遇到了一些困难，因此我写了这篇文章来记录我的经验。 由于TypeScript是Angular 2项目的默认语言，因此现有的JS设置不起作用。

入门 (Getting started)

Here are the steps to setup a Jenkins CI environment for Angular projects with code coverage using SonarQube on a headless Linux server:

以下是在无头Linux服务器上使用SonarQube为覆盖代码的Angular项目设置Jenkins CI环境的步骤：

• Download Jenkins and set it up on your build server. Make sure you have Java installed on it, as it is required by Jenkins. Note: Jenkins’ default configuration runs with jenkins user, so you might need to set JAVA_HOME for the jenkins user.

  下载Jenkins并将其设置在您的构建服务器上。 确保您已安装Jenkins要求的Java。 注意 ：Jenkins的默认配置与jenkins用户一起运行，因此您可能需要为jenkins用户设置JAVA_HOME 。

• Once Jenkins is setup, install or make sure you have the following plugins installed from the manage plugins menu:设置Jenkins后，请从“管理插件”菜单安装或确保已安装以下插件：

• Make Git, Node, and SonarQube scanner available to Jenkins. This can be done from the Global Tool Configuration menu in the Manage Jenkins menu. You can either chose to install automatically or provide the installation path for these tools. For example:

  使Jenkins可以使用Git，Node和SonarQube扫描仪。 这可以从Manage Jenkins菜单中的Global Tool Configuration菜单中完成。 您可以选择自动安装，也可以提供这些工具的安装路径。 例如：

• Lastly, make Jenkins aware of the SonarQube server installation from the Configure menu in Manage Jenkins. For example:

  最后，从Manage Jenkins中的Configure菜单使Jenkins知道SonarQube服务器的安装。 例如：

Download SonarQube and set it up on your server. It is usually a simple package extraction on all platforms.

下载SonarQube并在您的服务器上进行设置。 通常，它是在所有平台上的简单软件包提取。

To enable Typescript support in SonarQube, we will use the SonarTsPlugin since SonarQube doesn’t yet have a default plugin for Typescript. Simply download the jar from the releases page of the plugin and place it in your SonarQube installations bin folder. Restart Jenkins once. That is all.

为了在SonarQube中启用Typescript支持，我们将使用SonarTsPlugin，因为SonarQube还没有Typescript的默认插件。 只需从插件的发行页面下载jar，然后将其放在SonarQube安装bin文件夹中。 重新启动詹金斯一次。 就这些。

In the Angular projects karma.conf.js file, change/add to the browsers section ChromeHeadless.

在Angular项目的karma.conf.js文件中，更改/添加到browsers部分ChromeHeadless 。

Example: browsers:['ChromeHeadless'] . From version 60 onwards Google Chrome supports headless mode on Windows as well. So you can continue to use this setting on local machine as well, in case you work on a Windows machine in an enterprise environment (as I do). I personally prefer the headless mode only for the 1–2 seconds that it saves me.

示例： browsers:['ChromeHeadless'] 。 从版本60开始， Google Chrome也支持 Windows的无头模式。 因此，如果您在企业环境中的Windows计算机上工作(就像我一样)，那么您也可以继续在本地计算机上使用此设置。 我个人更喜欢无头模式，这种模式只为我节省了1-2秒。

Add the following to the scripts section in package.json file.

将以下内容添加到package.json文件中的scripts部分。

The above command makes sure that the build is only triggered if all the tests are successful. The --cc flag is a short code for --code-coverage. This flag will produce the projects coverage report in a new folder named coverage within the project directory. The report file is named lcov.info.

上面的命令确保仅在所有测试成功后才触发构建。 --cc标志是--code-coverage的简短代码。 该标志将在项目目录中名为coverage的新文件夹中生成项目coverage报告。 该报告文件名为lcov.info 。

The default configuration uses Istanbul reporter to show the code coverage report. To publish this coverage report to SonarQube server, the Jenkins SonarQube scanner plugin requires a configuration which can be added as a sonar-project.properties file to the project or within the Jenkins project configuration. Example properties file:

默认配置使用Istanbul报告程序显示代码覆盖率报告。 要将覆盖报告发布到SonarQube服务器，Jenkins SonarQube扫描器插件需要一个配置，该配置可以作为sonar-project.properties文件添加到项目中或在Jenkins项目配置中。 示例属性文件：

组态 (Configuration)

With the above steps done, the project configuration in Jenkins is fairly simple.

完成上述步骤后，Jenkins中的项目配置非常简单。

First create a new configuration using New Item menu and then a Freestyle project.

首先使用New Item菜单创建一个新配置，然后使用Freestyle项目 。

Next in the Source Code Management section enable Git and setup the projects repo URL:

接下来，在“ 源代码管理”部分中启用Git并设置项目存储库URL：

In the Build Environment section, enable the checkbox for providing the node and npm environment to the build configuration.

在“ 构建环境”部分中，启用复选框以将节点和npm环境提供给构建配置。

Then in the Build sectionn add two build steps. First Execute Shell and second Execute SonarQube Scanner.

然后在“ 构建”部分中添加两个构建步骤。 第一个执行Shell和第二个执行SonarQube Scanner 。

The shell step is to run the cibuild npm script and the latter to trigger the coverage report analysis. As mentioned above, the sonar properties can be set in the build configuration as well. Example build configuration:

Shell步骤是运行cibuild npm脚本，然后运行cibuild npm脚本来触发coverage报告分析。 如上所述，声纳属性也可以在构建配置中设置。 示例构建配置：

That is all. Now a build can be triggered using the Build Now menu on the projects home page.

就这些。 现在，可以使用项目主页上的“ 立即构建”菜单来触发构建 。

The build log will show the test results, the build logs, and the publish log to SonarQube server. It is ideal to setup remote triggers or web hooks to trigger the project build. This will ensure the stability of the project whenever there is a change in the repo.

构建日志将显示测试结果，构建日志以及将日志发布到SonarQube服务器。 设置远程触发器或Web挂钩以触发项目构建的理想选择。 每当回购发生变化时，这将确保项目的稳定性。

Finally, on visiting the SonarQube server, the project details should be visible with all the metrics captured from code coverage report. Example:

最后，在访问SonarQube服务器时，应该使用从代码覆盖率报告中捕获的所有指标显示项目详细信息。 例：

This is only the first step towards creating a healthier code base. The Jenkins build can be further enhanced to create a pipeline build for better control and granular modifications.

这只是创建更健康的代码库的第一步。 可以进一步增强Jenkins构建，以创建管道构建，以实现更好的控制和精细的修改。

Originally published at medium.com on September 16, 2017.

最初于2017年9月16日发布在medium.com上。

翻译自: https://www.freecodecamp.org/news/steps-you-should-take-to-build-a-healthy-angular-project-84eea6608d5f/

angular搭建项目步骤