如何建立React元件併發布到npm？

lesixing發表於2018-03-23
React元件NPM

實現步驟：

  • 建立React元件專案；
  • 建立測試專案並引用元件；
  • 釋出React元件到npm上；

一、建立React元件專案,假設我們的元件名為react-cat

react-cat專案結構

建立react-cat目錄：

//react-cat
> mkdir react-cat
> cd react-cat
> yarn init
複製程式碼

安裝依賴包:

//yarn add dependencies
yarn add babel-core babel-loader style-loader css-loader -D
yarn add react babel-preset-env babel-preset-react clean-webpack-plugin -D
yarn yarn add webpack webpack-cli -D
複製程式碼

package.json

// react-cat/package.json
{
  "name": "react-cat",
  "version": "1.0.0",
  "main": "lib/index.js",
  "author": "pengjielee",
  "license": "MIT",
  "scripts": {
    "build": "webpack --progress",
    "watch": "webpack --watch --progress"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "react": "^16.2.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.12"
  }
}
複製程式碼

.gitignore

// react-cat/.gitignore
node_modules/
複製程式碼

webpack.config.js

// react-cat/webpack.config.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'production', 
  
  entry: {
    index: './src/index.js'
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "lib"),
    libraryTarget: 'commonjs2'
  },

  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader?presets[]=env&presets[]=react' 
      },
      { 
        test: /\.css$/, 
        use: ['style-loader','css-loader']
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(['lib'])
  ]
}
複製程式碼

src/components/hello.js

// react-cat/src/components/hello.js
import React from 'react';

import './hello.css'

class Hello extends React.Component {
  render() {
    return (
      Hello Cat!
    );
  }
}

module.exports =  Hello
複製程式碼

src/components/hello.css

// react-cat/src/components/hello.css
body{
  padding:20px;
}

.hello{
  font-size: 30px;
  padding:20px 0;
  color:red;
}
複製程式碼

src/index.js

// react-cat/src/index.js
import Hello from './components/Hello.js';

export default Hello
複製程式碼

構建專案：

yarn run build
複製程式碼

建立專案連結

yarn link
複製程式碼

二、建立測試專案

//pblog
yarn global add create-react-app
create-react-app pblog
複製程式碼

pblog專案結構

連結react-cat專案

yarn link ‘react-cat’
複製程式碼

開啟pblog/src/App.js，引入react-cat元件

// pblog/src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from 'react-cat';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Hello />
      </div>
    );
  }
}
 
export default App;
複製程式碼

執行專案：

yarn run start
複製程式碼

image

三、釋出到npm上

  • 註冊npm賬號 npm；
  • 進入我們的react-cat元件專案,執行yarn login，輸入npm使用者名稱和密碼；
  • 釋出我們的專案，執行yarn publish；

四、遇到的問題

webpack生成元件專案的output的libraryTarget要設定為commonjs2

// react-cat/webpack.config.js
{
  ... 
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "lib"),
    libraryTarget: 'commonjs2' //注意：記得設定commonjs2
  }
  ...
}
複製程式碼

釋出元件不成功的時候，搜一下npm上是否有同名元件

五、參考文章

六、專案原始碼

react-cat

原文連結

相關文章