# 使用NPM构建上传软件包至软件发布库（内置执行机/图形化构建）
#### 应用场景
本实践帮助您了解如何通过编译构建服务的内置执行机，并以图形化构建的方式编译Node.js项目并上传软件包至软件发布库。
本实践需要依赖使用的其他服务如下：
- [代码托管服务](https://support.huaweicloud.com/codeartsrepo/index.html)，用于存储实践中项目所使用的代码。
- [制品仓库服务](https://support.huaweicloud.com/cloudartifact/index.html)，用于存储实践中使用的私有依赖包。
 
#### 约束限制
- 需已具备CodeArts Artifact服务的操作权限，具体操作可参考[授权使用CodeArts Artifact服务](https://support.huaweicloud.com/usermanual-cloudartifact/cloudartifact_bill_9000.html)。
- 需已具备CodeArts Repo服务的操作权限，具体操作可参考[授权使用CodeArts Repo服务](https://support.huaweicloud.com/usermanual-codeartsrepo/codeartsrepo_03_0132.html)。
 
#### 操作流程
表1操作流程 
| **流程**                                                                                         | **说明**                |
|:---|:---|
| [新建项目]                                             | 为本实践新建项目。             |
| [新建CodeArts Repo代码仓] | 为本实践新建Repo代码仓。        |
| [新建构建任务]              | 为本实践新建编译构建任务。         |
| [配置构建步骤并执行构建任务]      | 按照本实践场景配置构建步骤并执行构建任务。 |
| [查看并验证构建结果]          | 查看并验证构建结果。            |
   
 #### 新建项目
1. 使用华为云账号[登录华为云控制台页面](https://console.huaweicloud.com/console)。
2. 单击页面左上角![](https://support.huaweicloud.com/bestpractice-codeci/zh-cn_image_0000002051251774.png)，在服务列表中选择"开发与运维 \> 华为云码道 CodeArts"。
3. 单击"立即使用"，进入CodeArts服务首页。
4. 在首页单击"新建项目"，选用"Scrum"项目模板。
5. 项目名称填写"build-bestpractice"，其他保持默认即可。
6. 单击"确定"后，进入到"build-bestpractice"项目下。
 
 #### 新建CodeArts Repo代码仓
1. 在导航栏选择"代码 \> 代码托管"。
2. 进入代码托管页面，单击"新建仓库"，选择"模板仓库"，单击"下一步"。
3. 选择"Nodejs Webpack Demo"模板，单击"下一步"。
4. 在新建仓库页面将"代码仓库名称"命名为"nodesource"，其他参数保持默认即可，单击"确定"。
 
 #### 新建构建任务
1. 在导航栏选择"持续交付 \> 编译构建"。
2. 单击"新建任务"，根据[表2]填写参数信息，单击"下一步"。
   
    表2基本信息配置 
   | **参数** | **说明**                                                                                                                    |
   |:---|:---|
   | 任务名称   | 自定义任务名称，例如：npm_yml_build。                                                                                                 |
   | 代码源    | 选择"Repo"。                                                                                                                 |
   | 代码仓    | 选择[新建CodeArts Repo代码仓]中新建的代码仓名称，选择"nodesource"。 |
   | 默认分支   | 保持默认"master"即可。                                                                                                           |
   | 任务描述   | 对该构建任务的描述。                                                                                                                |
      
   
   
3. 选择"npm"模板，单击"确定"，进入构建步骤配置页面。
 
 #### 配置构建步骤并执行构建任务
1. 配置"Npm构建"。 
   在命令编辑器里，npm run build命令前加"#"，新增zip -r ./nodeserver.zip ./命令，用来将代码打包成"nodeserver.zip"，如[图1]所示。其他参数保持默认即可。
   图1命令示例   
   ![](https://support.huaweicloud.com/bestpractice-codeci/zh-cn_image_0000002051251422.png)
   
   
2. 按[图2]所示配置"上传软件包到软件发布库"。
   
   图2配置上传软件包到软件发布库   
   ![](https://support.huaweicloud.com/bestpractice-codeci/zh-cn_image_0000002051093094.png)
   
   
3. 配置完所有构建步骤，单击"保存并执行"，执行编译构建任务。
 
 #### 查看并验证构建结果
在导航栏选择"制品仓库 \> 软件发布库"，查看上传的软件包，如[图3]所示。
图3查看上传的软件包   
![](https://support.huaweicloud.com/bestpractice-codeci/zh-cn_image_0000002087370509.png)
包名和发布版本与[2]中配置的包名和发布版本号一致。
#### 相关操作
关于NPM构建更多常见问题，可参考[NPM构建常见问题](https://support.huaweicloud.com/codeci_faq/codeci_faq_0007.html)。