# Npm构建 使用Npm工具管理软件包，可以完成vue和webpack的构建。 #### 操作视频 本视频介绍基于代码化构建方式执行Npm构建的操作。 #### 配置Npm构建 CodeArts Build支持图形化构建和代码化构建两种方式。 - [图形化构建] 在[配置构建步骤](https://support.huaweicloud.com/usermanual-codeci/codeci_ug_0059.html)中，添加"Npm构建"构建步骤，可参考[表1]配置参数。 表1Npm构建参数说明 | **参数** | **说明** | |:---|:---| | 步骤显示名称 | 构建步骤的名称，可自定义修改。 - 支持中文、英文、数字、"-"、"_"、英文逗号、英文分号、英文冒号、"."、"/"、圆括号（中英文）。 - 字符长度范围为1\~128。 | | 工具版本 | 根据用户实际开发环境的需要，选择对应的工具版本。 CodeArts Build支持的工具版本，可查看[构建工具版本](https://support.huaweicloud.com/productdesc-codeci/cloudbuild_07_0004.html)。若当前的工具版本不满足您的使用要求，您可以[制作镜像并推送到SWR仓库](https://support.huaweicloud.com/usermanual-codeci/codeci_ug_0013.html)。 | | 命令 | 配置Npm命令，一般使用系统默认生成的命令即可。如有特殊构建要求，可以在文本域中输入自定义的构建脚本。更多命令使用方法可参考[Node.js官网](https://nodejs.org/zh-cn/download/package-manager)。 | | 失败后是否继续运行 | 当前步骤执行失败后是否继续执行下一个步骤，根据实际使用场景选择是或否。 | - [代码化构建] 参考以下代码示例，修改在[创建代码化构建使用的YAML文件](https://support.huaweicloud.com/usermanual-codeci/codeci_ug_0058.html#codeci_ug_0058__section72391847131511)中的BUILD部分代码信息。 ``` version: 2.0 # 必须是2.0 steps: BUILD: - npm: image: cloudbuild@nodejs8.11.2 inputs: command: | export PATH=$PATH:~/.npm-global/bin #设置缓存目录 npm config set cache /npmcache npm config set prefix '~/.npm-global' npm config set registry https://repo.example.com/repository/npm/ #nodejs版本小于18时可以开启下列配置；大于等于18时请自行在.npmrc文件中设置，禁止采用构建命令方式配置 npm config set disturl https://repo.example.com/nodejs npm config set sass_binary_site https://repo.example.com/node-sass/ npm config set phantomjs_cdnurl https://repo.example.com/phantomjs npm config set chromedriver_cdnurl https://repo.example.com/chromedriver npm config set operadriver_cdnurl https://repo.example.com/operadriver npm config set electron_mirror https://repo.example.com/electron/ npm config set python_mirror https://repo.example.com/python npm install --verbose npm run build ignore_fail: true ``` 表2代码示例参数说明 | **参数** | **类型** | **说明** | |:---|:---|:---| | image | string | 填写镜像地址，有以下两种格式。 - cloudbuild@nodejs8.11.2：以cloudbuild开始，@作为分隔符，后面是CodeArts Build提供的默认镜像版本。 - 完整的swr镜像地址，例如:swr.example.example.com/codeci_test/demo:141d26c455abd6d7xxxxxxxxxxxxxxxxxxxx | | command | string | 配置Npm命令。更多命令使用方法可参考[Node.js官网](https://nodejs.org/zh-cn/download/package-manager)。 | | ignore_fail | string | 用于控制当前步骤执行失败后是否继续执行下一个步骤。 - true：是。 - 为空：否。 | #### 相关文档 - Npm构建常见问题可参考[使用Npm构建时常见问题](https://support.huaweicloud.com/codeci_faq/codeci_faq_0007.html)。 - 配置.npmrc文件可参考[如何在.npmrc文件配置镜像源](https://support.huaweicloud.com/codeci_faq/codeci_02_0053.html)。