使用 create-react-library 快速開發獨立 component library

想要開發獨立的 React component library 卻不知從何下手？在工作專案中開發了一堆 component 卻怎樣拆也拆不開？聽說有 create-react-library 這個神奇工具可以快速地解決這些麻煩，立馬來試試。

安裝

yarn global add create-react-library

使用 create-react-library

安裝好之後就可以馬上用它的 CLI 試試，先設定個目標—一個沒用的按鈕（UselessButton）好了。

$ create-react-library 
? Package Name useless-button
? Package Description Test for create-react-library
? Author's GitHub Handle ccmikechen
? GitHub Repo Path ccmikechen/useless-button
? License MIT
? Package Manager yarn
? Template default
✔ Copying default template to /home/mike/workspace/useless-button/useless-button
✔ Running yarn install and yarn link
✔ Initializing git repo


Your module has been created at /home/mike/workspace/useless-button/useless-button.

To get started, in one tab, run:
$ cd useless-button && yarn start

And in another tab, run the create-react-app dev server:
$ cd useless-button/example && yarn start

這樣就通通幫你建完了。繼續照著指示做。

開發用 Server

create-react-library 很貼心的提供開發用 Server 讓你一邊開發一邊看結果。

cd example && yarn start

之後在瀏覽器開啟 http://localhost/ 就可以看到 component 的樣子了。

開發 Component

現在一切準備妥當，開始來開發我們的沒用的按鈕。

// src/index.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import styles from './styles.css'

export default class UselessButton extends Component {
  static propTypes = {
    text: PropTypes.string
  }

  render() {
    const {
      text
    } = this.props

    return (
      <button className={styles.button}
              onClick={() => alert("You are useless!")}>
        { text }
      </button>
    )
  }
}

/* src/styles.css */
.button {
  display: inline-block;
  margin: 2em auto;
  border: 2px solid #000;
  font-size: 2em;
}

// example/src/App.js

import React, { Component } from 'react'

import UselessButton from 'useless-button'

export default class App extends Component {
  render () {
    return (
      <div>
        <UselessButton text='Useless' />
      </div>
    )
  }
}

接下來看到畫面上出現了我們的沒用的按鈕，按下去會跳出 alert ，功能正常，接下來就可以發布囉！

發布

要發布自己的 library 到 npm 之前必須先擁有 npm 的帳號，沒有的先去 npm 官網申請一個吧！ 接下來簡單透過指令發布：

yarn publish

這樣就完成了，可以到 npm 的頁面找找看。

https://www.npmjs.com/package/useless-button

測試

既然已經發布到 npm 上了，那就來試試看吧！ 我們可以使用 create-react-app 建立一個新專案試試。

yarn global add create-react-app
create-react-app useless-button-test
cd useless-button-test
yarn start

這樣測試用的 server 也開好了，將我們的 library 加進專案中。

yarn add useless-button

// useless-button-test/src/App.js

import React, { Component } from 'react';

import UselessButton from 'useless-button';

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <UselessButton text="Useless" />
      </div>
    );
  }
}

export default App;

接下來畫面上就能看到我們剛剛開發的 UselessButton 囉！