(動手)發佈一個react/react-native組件到npm社區

前言

過程

初始化目錄

mkdir ‘組件名稱’

npm init

將會生成package.json文件

新建src目錄作爲組件的源代碼目錄，index.js作爲組件入口
新建lib目錄作爲組件的編譯後目錄，這個目錄只讀

修改package.json的main字段爲"src/index.js"或"lib/index.js"

編寫組件

src/index.js中就可以編寫組件了，導出組件

export default class extends React.Component{
    render(){
        return (
            <div>Hello,World!</div>
        )
    }
}

調試組件

執行 npm link

在根目錄下，create-react-app example

cd example && npm link '組件名稱'

通過npm link命令，可以在本地模擬項目 npm install '組件名稱'

接下來，你就可以在example項目中，

import 組件名稱  from “組件名稱”

發佈

註冊npm賬號

登陸npm賬號

npm publish

小結