内容
一、自动化测试
二、持续集成
三、发布npm包
四、npm link
——————————————————————————————————
一、自动化测试
使用karma + mocha 做单元测试
使用 Karma + Mocha做单元测试
1.Karma（[ˈkɑrmə] 卡玛）是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例
2.Mocha（[ˈmoʊkə] 摩卡）是一个单元测试框架/库，它可以用来写测试用例
3.Sinon（西农）是一个 spy / stub / mock 库，用以辅助测试（使用后才能理解）
步骤
1.安装各种工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
-
创建 karma 配置
// 新建 karma.conf.js，内容如下 module.exports = function (config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['mocha', 'sinon-chai'], client: { chai: { includeStack: true } }, // list of files / patterns to load in the browser files: [ 'dist/**/*.test.js', 'dist/**/*.test.css' ], // list of files / patterns to exclude exclude: [], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: {}, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['ChromeHeadless'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) } -
创建 test/button.test.js 文件
const expect = chai.expect; import Vue from 'vue' import Button from '../src/button' Vue.config.productionTip = false Vue.config.devtools = false describe('Button', () => { it('存在.', () => { expect(Button).to.be.ok }) it('可以设置icon.', () => { const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings' } }).$mount() const useElement = vm.$el.querySelector('use') expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings') vm.$destroy() }) it('可以设置loading.', () => { const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings', loading: true } }).$mount() const useElements = vm.$el.querySelectorAll('use') expect(useElements.length).to.equal(1) expect(useElements[0].getAttribute('xlink:href')).to.equal('#i-loading') vm.$destroy() }) it('icon 默认的 order 是 1', () => { const div = document.createElement('div') document.body.appendChild(div) const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings', } }).$mount(div) const icon = vm.$el.querySelector('svg') expect(getComputedStyle(icon).order).to.eq('1') vm.$el.remove() vm.$destroy() }) it('设置 iconPosition 可以改变 order', () => { const div = document.createElement('div') document.body.appendChild(div) const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings', iconPosition: 'right' } }).$mount(div) const icon = vm.$el.querySelector('svg') expect(getComputedStyle(icon).order).to.eq('2') vm.$el.remove() vm.$destroy() }) it('点击 button 触发 click 事件', () => { const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings', } }).$mount() const callback = sinon.fake(); vm.$on('click', callback) vm.$el.click() expect(callback).to.have.been.called }) }) -
创建测试脚本
在 package.json 里面找到 scripts 并改写 scripts"scripts": { "dev-test": "parcel watch test/* --no-cache & karma start", "test": "parcel build test/* --no-minify && karma start --single-run" }, -
运行测试脚本
- 要么使用
npm run test一次性运行 - 要么使用
npm run dev-test进行 watch 运行
- 要么使用
成果
如此一来，你开发的时候新开一个命令行窗口运行 npm run dev-test 就可以实时查看测试结果（无刷新）。
如果你只想看一次结果，就只用运行 npm run test
二、持续集成 使用Travis CI
1.到travisCI 创建一个账户
持续集成包括
image.png
目前持续化集成 中的持续测试有两个：
travis CI 没有数量限制，想做几个项目就做几个项目
circle CI 功能强大但是有数量限制，一次只能运行一个，如果运行多个就要花钱
在根目录中创建travis.yml
language: node_js
node_js:
- "8"
- "9"
- "10"
addons:
chrome: stable
sudo: required
before_script:
- "sudo chown root /opt/google/chrome/chrome-sandbox"
- "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
打开travisCI 点击+
image.png
搜索
image.png
然后回到首页
image.png
就在自动测试了
三、发布npm包
1 确保你的代码测试通过了
npm run test 全部是绿色（原谅色）才行。
2 上传代码到 npmjs.org
-
更新 package.json
- 在 package.json 里将版本号改为 0.0.1，等我们做完了再改成 1.0.0
- 创建 index.js，在 index.js 里将你想要导出的内容全部导出
去 https://www.npmjs.com/ 注册一个账户
确认一下邮箱（必须）
-
在 gulu 项目根目录运行 npm adduser
- 如果错误提示里面含有 https://registry.npm.taobao.org则说明你的 npm 源目前为淘宝源，需要更换为 npm 官方源
步骤：
npm config list 找到以.npmrc结尾的文件 将淘宝源那句话前面加// 注释掉即可
- 如果错误提示里面含有 https://registry.npm.taobao.org则说明你的 npm 源目前为淘宝源，需要更换为 npm 官方源
运行 npm publish
image.png
3 使用自己的包
- 预测其他使用你的包的人会怎么使用
- 使用 vue-cli
- 使用 webpack
- 使用 parcel
- 分别使用这些方式来使用自己的包（我们只以 vue-cli 为例）
- 使用过程中我们发现报错说 import 语法有问题，那时因为 node 目前确实不支持 import，我们需要用 babel 转译 import
- 你可以要求使用者自己用 babel 来转译
- 你也可以转义好了再给他用
-
npx parcel build index.js --no-minify（本来不应该加 --no-minify 的，奈何不加会有 bug，HTML 压缩把 slot 标签全删了） - 将 package.json 的 main 改为 dist/index.js
-
- 使用过程中我们发现报错说 import 语法有问题，那时因为 node 目前确实不支持 import，我们需要用 babel 转译 import
- 使用 npm link 或者 yarn link 来加速调试
- 你每次修改源码之后，有两条路让别人得到最新效果
- 更新 package.json 里的 version，然后 npm publish。别人通过 npm update xxx 来更新。
- 如果你只是为了本地调试，可以在项目目录使用 npm link，然后在使用之处运行 npm link xxx，就是最新了
- 你每次修改源码之后，有两条路让别人得到最新效果
四、npm link
如何避免总是发版本 npm publish 然后在本地目录下载版本呢
首先执行 npm link 或者 yarn link
image.png
然后本机的用户测试的时候执行 yarn link vue-ui-zzyo
这时如果轮子的代码改动了 只需执行 npx parcel build index.js --no-cache --no-minify 本地测试环境中刷新就可以看到改动了 不需要重复 yarn link，只执行yarn link 一次就可以了
