使用CircleCI实现SPFx库组件的持续集成（一）

库组件（Library Component）是SPFx 1.8的新功能：SharePoint Framework v1.8新功能：使用库组件（Library Component）在webpart间共享代码

这几篇博客介绍如何使用CircleCI实现库组件的持续集成，当向github提交代码之后，CircleCI自动执行如下任务：

1. 自动捆绑 （本篇）

2. 单元测试 （使用CircleCI实现SPFx库组件的持续集成（二））

3. 自动打包

首先创建一个新的项目：spfx-CircleCI (请先将本地的spfx yeoman生成器更新到最新版本)，在运行yeoman生成器的时候需要使用--plusbeta，目前库组件在SPFx 1.8版本中还是preview功能。

运行npm shrinkwrap锁定依赖项版本。

在github上创建spfx-CircleCI公共项目，提交，上传代码。

使用github账号登陆CircleCI，在ADD PROJECTS中可以看到所有公共项目：

点击Set Up Project配置yml文件，选择Linux，运行环境Node：

点击“Copy To Clipboard“按钮，可以获取默认的config.yml文件的内容如下，这个稍后需要修改才可以使用：

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:7.10

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      # run tests!
      - run: yarn test

在github的spfx-CircleCI项目中添加.circleci文件夹，在文件夹中添加一个config.yml文件：

这里注意需要将config.yml示例文件做一个简单修改，第一是将node的版本从默认的7.10改为8.15，也就是node 8.x的最高版本。除此之外因为个人喜好，我把yarn命令替换为了npm命令。

最后将config.yml文件提交。

回到CircleCI的控制台，点击“Start Building”；

开始自动build：

成功！

到JOBS中查看job的详情：

点击链接可以看到build的信息：

这个时候使用VS Code打开本地代码，首先pull一下同步代码，然后在“SpFxCircleCiLibrary.ts"文件中添加一个新的方法如下：

然后提交并push到github中去，此时CircleCI会自动触发工作流运行：

这样我们就可以通过修改config.yml文件来定制工作流了，

添加gulp clean， gulp bundle捆绑：

但是这样添加命令之后，在运行circleci job的时候会报错： gulp: command not found.

解决办法是，在执行npm install之后执行如下命令，链接gulp：

- run: sudo npm link gulp

所以完整的步骤是：

version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:8.15

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: npm install
      
      - run: sudo npm link gulp
      
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
          
      # run gulp
      - run: echo "run gulp tasks"
      - run: gulp clean
      - run: gulp bundle

      # run tests!
      - run: npm test

完整代码示例：https://github.com/shrenky/spfx-CircleCI

接下来让我们配置单元测试。