库组件(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
接下来让我们配置单元测试。