bitsrcのチュートリアルやってみた

• https://bitsrc.io/
• yarnを基本的に使っています。適宜npmなどに置き換えてください。

tutorialプロジェクトをcloneする

$ git clone https://github.com/teambit/tutorial-react.git
$ cd tutorial-react

componentを作ってscopeで公開するまで

初期化

$ cd export-button
$ bit init

匿名の利用状況送信をわけも分からずyesにした場合

• bit init時に以下のようなメッセージが出て適当にyesにしてしまった。
  help us prioritize new features and bug fixes by enabling us to collect anonymous statistics about your usage. sharing anonymous usage information is completely voluntary and helps us improve Bit and build a better product.
for more information see analytics documentation - https://docs.bitsrc.io/docs/conf-analytics.html
would you like to help Bit with anonymous usage analytics? [yes(y)/no(n)]: (yes) y

• 仕事で使う時に少し気になるので、送信しないようにするときは以下を実行する。

$ bit config set anonymous_reporting false

bitsrc へログイン

bit login

sshの設定とかは以下見ながら頑張る方向で。。
https://docs.bitsrc.io/docs/setup-authentication.html#set-up-bitsrcio-connectivity

scopeにコンポーネントを追加

bit add src/ui/button.js --id ui/button

import react

bit import bit.envs/compilers/react -c

ui/buttonをbuild

bit build ui/button

componentのバージョンをロック

bit tag ui/button

bitsrcの自身のscopeへexportする

bit export kubio.example

exportしたcomponentを使う

import用プロジェクトへ移動＆初期化

$ cd ../import-button
$ npm install # or yarn install

レジストリを追加する

$ yarn config set @bit:registry https://node.bitsrc.io

exportしたcomponentをプロジェクトに追加する

yarn install @bit/kubio.example.ui.button

追加したcomponentを使う

$ vi src/App.js

• 差分

diff --git a/import-button/src/App.js b/import-button/src/App.js
index 203067e..fd07bbc 100644
--- a/import-button/src/App.js
+++ b/import-button/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Button from '@bit/kubio.example.ui.button';

 class App extends Component {
   render() {
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <Button />
       </div>
     );
   }

実行

$ yarn start

所感

• componentをimportするの良い
• コンポーネント単位で管理できるのでプロジェクトの横展開とかが楽になりそうだと思いました。
• あんまり日本語の記事が見つけられなかった
• 流れはわかったけど、細かいところは今後使ってみて覚えようと思う

参考

• https://docs.bitsrc.io/tutorial/react-tutorial.html#in-this-tutorial-youll-learn