谈一次开源项目贡献

给开源项目作贡献，一方面可以增长本身看源码的积累，另外一方面也是对自身代码能力的检验。由于开源项目自己已是完整的项目，对于开源项目咱们能贡献的大概分三种（docs文档、bug、feature新特性），其中难易度为 docs < bug < feature，但我提倡入手的时候能够从修复bug开始，这样更利于熟悉项目的代码。

如下以我最近给vue-i18n的一次pr为例，展现下从issue到pr的总体流程。

查看issue

github.com/kazupon/vue…，对于一个反映bug的issue，咱们首先须要确认下是否可以复现，该issue上面已经提供了复现连接；demo中设置了formatFallbackMessages: true，在组件<i18n>使用不在messages的I accept {tos}.时，将其错误解析为I accept [object Object].

<i18n path="I accept {tos}." tag="div">
  <template #tos>
    <a href="about:blank">{{ $t('Terms of Service') }}</a>
  </template>
</i18n>
复制代码

整个issue中提到了formatFallbackMessages这个配置，因为本人没有使用过，因此须要理解这个配置项，打开官网文档发现该配置中文部分是缺失的（目前已经补充）。fallback-interpolation文档

注意message中的key是带有占位变量的

const messages = {
  ru: {
    'Hello {name}': 'Здравствуйте {name}'
  }
}

const i18n = new VueI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  formatFallbackMessages: true,
  messages
})
复制代码

当模板template以下时：

<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>
<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>
复制代码

将会输出：

<p>Здравствуйте John</p>
<p>The weather today is sunny!</p>
复制代码

该feature的做者原意是想以en的翻译文案做为message，同时将en的文案做为其余语言的key，这样在代码层面就能够很容易的理解多语言的内容。理解了配置项的含义后，咱们的修复bug之路就能够迈进下一步了。

查看源码

首先咱们查看项目的贡献文档（大多数项目都会有贡献说明文档），虽然说文档上让开发者在我的项目的v8.x分支编写，但我一般都会在v8.x切出fix分支，这样更利于以后对该项目其余issue的贡献。

我看代码的流程一般是从调用方式开始看的，可是这是在组件<i18n>中使用，因此在源码中难以查找其调用方式，因此此次咱们以配置项formatFallbackMessages为入口查看。

经过全局搜索查到，src/index.js的_warnDefault方法中有其配置的判断（且仅有这里有调用）：

if (this._formatFallbackMessages) {
  const parsedArgs = parseArgs(...values)
  return this._render(key, 'string', parsedArgs.params, key)
} else {
  return key
}
复制代码

_warnDefault是当获取不到相关key的时候进行调用，而在咱们知道这个配置项的含义就是找不到key的使用使用翻译值当key，因此咱们接着往下看this._render方法：

_render (message: string, interpolateMode: string, values: any, path: string): any {
  let ret = this._formatter.interpolate(message, values, path)

  // If the custom formatter refuses to work - apply the default one
  if (!ret) {
    ret = defaultFormatter.interpolate(message, values, path)
  }

  // if interpolateMode is **not** 'string' ('row'),
  // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter
  return interpolateMode === 'string' ? ret.join('') : ret
}
复制代码

这段函数，message会通过formatter的interpolate方法，interpolate方法，以$t的调用来简单说明，会根据第二个参数的数据类型进行判断并组合，例如$t('hello {1}', {1: 'me'})会被编译为hello me、$t('hello {1}', ['me'])也会被编译为hello me，固然还有vnode的形式调用（v-html使用）；通过编译后会根据interpolateMode值进行不一样的组合，这里咱们看到_warnDefault中调用的_render是传递写死的string，经过查看其余_render的调用发现interpolateMode还能是raw。

测试

到这一步，咱们怀疑多是interpolateMode写死string的可能，为此咱们能够写一个test函数，这段测试函数能够在原有的单元测试中添加，在test/interpolation.test.js中咱们找到了如何对<i18n>组件测试的方法:

describe('included translation locale message', () => {
  it('should be interpolated', done => {
    const el = document.createElement('div')
    const vm = new Vue({
      i18n,
      render (h) {
        return h('i18n', { props: { path: 'term' } }, [
          h('template', { slot: '0' }, [
            h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })
          ])
        ])
      }
    }).$mount(el)
    nextTick(() => {
      assert.strictEqual(
        vm.$el.innerHTML,
        'I accept xxx <a href=\"/term\">Term of service</a>.'
      )
    }).then(done)
  })
})
复制代码

咱们就依葫芦画瓢，增长一个describe，设置formatFallbackMessages : true，i8n的path设置为带有参数的string：

describe('formatFallbackMessages', () => {
  let i18n
  beforeEach(() => {
    i18n = new VueI18n({
      locale: 'en',
      messages,
      formatFallbackMessages: true
    })
  })

  it('should be interpolated', done => {
    const el = document.createElement('div')
    const vm = new Vue({
      i18n,
      render (h) {
        return h('i18n', { props: { path: 'I am {0}' } }, [
          h('template', { slot: '0' }, [
            h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })
          ])
        ])
      }
    }).$mount(el)

    nextTick(() => {
      assert.strictEqual(
        vm.$el.innerHTML,
        'I am <a href=\"/term\">Term of service</a>'
      )
    }).then(done)
  })
})
复制代码

以后咱们经过修改_warnDefault中的interpolateMode为raw，输出符合预想，确实是这个参数的缘由，而后咱们就能够进行修复工做了。

修复

经过调用的源头发现，interpolateMode参数一直有传递进去，因此咱们只要修改沿途调用的interpolateMode为传递的值，最后传递进_render就能够了。

if (this._formatFallbackMessages) {
  const parsedArgs = parseArgs(...values)
  return this._render(key, interpolateMode, parsedArgs.params, key)
} else {
  return key
}
复制代码

进行补充测试item和全量测试

补充item后，命令行跑npm run test，根据输出test:unit测试是跑通的，可是test:e2e报错，提示我安装jdk，当时我想着代码没问题就能够提交pr了。

提交pr

这里有个小技巧，在给element-ui贡献代码时我就发现，若是你在commit信息中添加相关的issue编号，也就是https://github.com/kazupon/vue-i18n/issues/779中最后的数字，那么在该issue中就会关联到你提交的commit（尽管这时你还没提交pr）。

提交pr后等待机器自动跑通test（如今开源项目通常都会有这一步骤），发现仍是跑不通test:e2e，这时负责pr的老哥就过来指导我了：

惭愧惭愧，其实开源项目说明我是这时候才认真看的，根据要求修改后，我就尝试在本地跑通test:e2e命令，安装jdk后仍是不能跑通，这令我很困惑毕竟单元测试也跑通了。

为此我尝试了俩种方式确认： 1.回退到我修改以前的版本，跑test:e2e命令，发现仍是跑不通，那说明要不就我本地环境不同，或者自己就跑不通。 2.在项目的pr页面查看我以前合并的pr，发现也是跑不通的，这时我就肯定项目自己跑不通。

这样子我就尝试本身修复e2e测试，但无果；次日我发现主分支由做者本人更新了，拉下来后发现是能跑通e2e测试，因此使用git pull vue-i18n v8.x --rebase命令后（vue-i18n是我本身设置的远程地址别名，--rebase能让个人commit延后到主分支以后），再次提交pr就能够了。

后话

同一天，项目做者合并了个人pr，这段修复流程应该就画上了句号。但并不，由于以前咱们说过该配置没有中文文档，另外也有issue反映没有中文文档很差理解，因此我又提了一个pr用于docs文档补充（github.com/kazupon/vue… ）。

其实给开源项目作贡献，可以让我在下班后学习新编码结构和对设计模式的理解，也能让我暂时脱离对业务的编写情绪中（固然了，工做中有时候也会作优化相关的有意思的工做），因此我有空仍是会上去贡献过的项目中看看issue，可否做出pr贡献，这便是对开源项目的理解熟悉，也是对自己能力的提高。