React组件前端组件化开发

React发布独立组件教程（简要流程步骤）

本开发文档主要包括开发工具、环境配置、组件化配置和组件化样例四个部分的讲解 ,其中使用ant-design和openlayers库作为其中的引用。

1.开发工具

1.1准备事项

JetBrains WebStorm 2019.2 x64 或者 Visual Studio Code

chrome浏览器调试

以下用webstorm为例

1.2环境配置

安装nodejs并确保node处于Windows环境变量当中，以win10为例

下图为本次所使用的node和npm版本

2.创建目录

确定一个盘符，在此处打开cmd终端，依次执行如下命令，目录名以react-simplify-ol为例：

mkdir react-simplify-ol
cd react-simplify-ol
npm init

3.配置项创建

此时会出现如下，一直回车，部分描述截图如下（这里用的另外一个目录名gitTest）:

4.配置项修改

可以发现在目录中已生成package.json文件，打开并添加保存成如下内容

{
  "name": "react-simplify-ol",
  "version": "1.0.0",
  "description": "just simplify test",
  "main": "./lib/index.js",
  "scripts": {
    "test": "test-ol",
    "build": "webpack --progress",
    "watch": "webpack --watch --progress",
    "publish": "npm publish -registry=http://172.16.1.73:8081/nexus/repository/npm-kfgeo-release/",
    "unpublish": "npm unpublish mapdesktop --force -registry=http://172.16.1.73:8081/nexus/repository/npm-kfgeo-release/"
  },
  "keywords": [
    "react",
    "react-simplify-ol"
  ],
  "author": "Areo",
  "license": "null",
  "dependencies": {
    "antd": "^3.26.6",
    "ol": "^6.1.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "postcss": "^7.0.26",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

5.依赖安装

切换成原来的cmd命令行界面，执行如下：

npm install

经过一段时间的安装后，生成node_modules文件夹。

6.目录完善

在根目录建立如下：src文件夹、 .babelrc、 .npmignore、 .npmrc(这些特殊格式文件用webstorm或者vscode创建)和webpack.config.js文件

src先在其中建立components文件夹和index.js,其中components中存放组件库，index.js作为输出文件。

7.示例组件

上述.babelrc写入如下内容

{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-remove-console",
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}

.npmignore则写入如下内容

node_modules
dist
example
src
public
.babelrc
.npmrc
app.js
index.html
package-lock.json
webpack.config.js
webpack.prd.js
yarn.lock
yarn-error.log

.npmrc写入如下内容（可选）,详情见后面：

prefix=D:\node\node_cache
cache=D:\Program Files\nodejs\node_cache
refistry=你的私服地址
always-auth=true()
_auth=a2ZnZW8tcmVsZWFzZTpLZmdlbzIwMTkh
registry=你的私服地址

components文件夹新建一个示例组件假设目录名为tableDemo，其中结构如下：

rolMap.js，olTable.js，style.less中代码如下

olMap.js

//olMap.js
import React from 'react';
import Map from 'ol/Map';
// import Tile from 'ol/layer/Tile';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import View from 'ol/View';
import {fromLonLat, get as getProjection, register} from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// import TileWMS from 'ol/source/TileWMS';
// import proj4 from 'proj4';
import {Input, Icon, message} from 'antd';
import styles from './style.less';


class MapDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      map: {},
      location: {
        latitude: 0,
        longitude: 0,
      },
    }
  }

  componentDidMount() {
    this.setState({map: this.initMap()});
  }

  initMap() {
    navigator.geolocation.getCurrentPosition(position => {
      const {latitude, longitude} = position.coords;
      return new Map({
        // 设置挂载点为map
        target: 'map',
        // 设置图层
        layers: [
          // new Tile({
          //   source: new OSM()
          // })
          new TileLayer({
            source: new XYZ({
              url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            })
          })
        ],
        // 设置地图的可视区域，center为中心点，zoom为缩放的层级
        view: new View({
          center: fromLonLat([+longitude, +latitude]),
          zoom: 13,
          //指定地图投影类型
          projection: 'EPSG:3857',
        })
      })
    }, error => message.error({
      content: error.message,
      duration: 1.5,
      maxCount: 1,
    }))
  };


  render() {
    return <div id="map" className={styles.mapDiv}>
    </div>
  }
}

export default MapDemo;

olTable.js

//olTable.js
import React from "react";
import {Table, Divider} from 'antd';
import MapDemo from './olMap';
import styles from './style.less';

export default class extends React.PureComponent {
    constructor() {
        super();
        this.state = {
            columns: [
                {
                    title: 'Name',
                    dataIndex: 'name',
                    render: text => <a>{text}</a>,
                },
                {
                    title: 'Age',
                    dataIndex: 'age',
                },
                {
                    title: 'Address',
                    dataIndex: 'address',
                },
            ],
            data: [
                {
                    key: '1',
                    name: 'John Brown',
                    age: 32,
                    address: 'New York No. 1 Lake Park',
                },
                {
                    key: '2',
                    name: 'Jim Green',
                    age: 42,
                    address: 'London No. 1 Lake Park',
                },
                {
                    key: '3',
                    name: 'Joe Black',
                    age: 32,
                    address: 'Sidney No. 1 Lake Park',
                },
                {
                    key: '4',
                    name: 'Disabled User',
                    age: 99,
                    address: 'Sidney No. 1 Lake Park',
                },
            ],
            title: <h2>地图表格测试</h2>
        }
    }

    componentDidMount() {
        console.log('OlTableDemo\' props', this.props);
    }

    render() {
        const {title, columns, data} = this.state;
        return <div className={styles.mainWrapper}>
            {title}
            <MapDemo/>
            <Divider/>
            <Table columns={columns} dataSource={data} pagination={false} bordered/>
        </div>
    }
}

style.less

.mainWrapper {
  @h-bg: #ffef87;
  padding: 20px;

  .mapDiv {
    width: 100%;
    height: 600px;
  }

  h2 {
    box-shadow: 0 2px 12px 0 rgba(13, 13, 13, 0.16);
    background-color: @h-bg;
    border-radius: 16px;
    text-align: center;
    color: #fff;
  }
}

其中olTable.js作为该组件的源和输出，在index.js中引入并输出这个组件库。

这里为了输出多个组件库从而不能使用export default方法，为了规范起见输出组件名后添加component后缀。

index.js

import OlTable from "components/tableDemo/olTable";

const exportDemo = {
    OlTable,
};

export default exportDemo; //exportDemo为例，记住这个名称

8*.组件输出配置（重要）

配置webpack压缩转义并打包输出该组件库，编辑目录下的webpack.config.js，复制以下代码进去：

webpack.config.js

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const projectRoot = path.resolve(__dirname, './');

module.exports = {
    mode: 'production',

    entry: {
        index: './src/index.js' //对应src下的index.js
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, "lib"), //这里一定要和package.json中的main对应
        libraryTarget: 'commonjs2'
    },
    resolve: {
        //配置在查找文件的过程中用到的后缀列表
        extensions: ['.js', 'jsx', '.less', '.css'],
        //如果webpack 在 resolve.root 或者 resolve.modulesDirectories 实在找不到某个模块了，会去这个目录中找
        //alias通过别名来把原导入路径映射成一个新的导入路径
        alias: {
            'src': path.resolve(__dirname, './src'),
            'assets': path.resolve(__dirname, './src/assets'),
            'components': path.resolve(__dirname, './src/components'),
            'util': path.resolve(__dirname, './src/util'),
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: projectRoot,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                }
            },
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {
                test: /\.less$/, use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader?modules"
                }, {
                    loader: "less-loader",
                    options: {
                        minimize: true,
                        importLoaders: 1
                    }
                },
                    {
                        loader: 'postcss-loader', options: {
                            plugins: [
                                require('autoprefixer')()
                            ]
                        }
                    }]
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ],
};

9.执行编译

打开文件目录下打开cmd终端，执行如下

npm run build

如果不出错的话，最终在目录下生成lib文件夹，其中有index.js

这就是这个组件库最终对外的输出源，再执行

npm link

npm会将其映射成一个本地的node_modules包。

10.新建一个react项目，引入上述输出的组件库

继上述执行如下cmd终端

cd ../
npm install create-react-app -g
mkdir react-quote-demo
cd react-quote-demo
create-react-app .

生成一个react完整项目

将其中的App.js修改成如下：

App.js

import React from 'react';
import './App.css';
import exportDemo from 'react-simplify-ol';

function App() {
    return (
        <div className="App">
            <kfgeo.OlTable />
        </div>
    );
}

export default App;

在react-quote-demo中执行cmd终端

npm link react-simplify-ol

其中react-simplify-ol就是我们上述定义的组件库目录名，执行成功后在react-quote-demo的node_modules包中即可发现react-simplify-ol。

11.效果预览

执行cmd终端

npm start

即可在浏览器中查看，可以看到我们在react-quote-demo中既没有引入antd也没有引入openlayers，但仅仅凭“OlTableDemo”这一单一组件也能完全达到如图所示实时效果和功能。

11.发布与下载

在此设置配置项，更改发布源并从发布源上下载

在react-simplify-ol中修改package.json中的scripts项。

  "scripts": {
    "test": "test-ol",
    "build": "webpack --progress",
    "watch": "webpack --watch --progress",
    "publish": "npm publish -registry=你的仓库地址",
    "unpublish": "npm unpublish mapdesktop --force -registry=你的仓库地址"
  },

通过cmd终端执行获得下载源

npm config get registry 或  npm info express

设置node_modules下载源

npm config set registry 你的仓库地址
或
npm --registry 你的仓库地址

或这编辑之前创建的.npmrc文件，写入以下内容

prefix=D:\node\node_cache
cache=D:\Program Files\nodejs\node_cache（你的node_cahce地址）
refistry=你的仓库地址
registry=你的仓库地址

发布成功后在package.json中的dependencies添加 “react-simplify-ol”: “1.0.0”,

执行npm install即可安装这个包。

通过cmd终端执行获得下载源

npm config get registry 或  npm info express

设置node_modules下载源

npm config set registry 你的仓库地址
或
npm --registry 你的仓库地址

或这编辑之前创建的.npmrc文件，写入以下内容

prefix=D:\node\node_cache
cache=D:\Program Files\nodejs\node_cache
refistry=你的仓库地址
registry=你的仓库地址

发布成功后在package.json中的dependencies添加 "react-simplify-ol": "1.0.0",

执行npm install即可安装这个包。