React发布独立组件教程（简要流程步骤）
本开发文档主要包括开发工具、环境配置、组件化配置和组件化样例四个部分的讲解 ,其中使用ant-design和openlayers库作为其中的引用。
1.开发工具
1.1准备事项
JetBrains WebStorm .2 x64 或者 Visual Studio Code
chrome浏览器调试
以下用webstorm为例
1.2环境配置
安装nodejs并确保node处于Windows环境变量当中，以win10为例
下图为本次所使用的node和npm版本
2.创建目录
确定一个盘符，在此处打开cmd终端，依次执行如下命令，目录名以react-simplify-ol为例：
mkdir react-simplify-olcd react-simplify-olnpm 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_modulesdistexamplesrcpublic.babelrc.npmrcapp.jsindex.htmlpackage-lock.jsonwebpack.config.jswebpack.prd.jsyarn.lockyarn-error.log
.npmrc写入如下内容（可选）,详情见后面：
prefix=D:\node\node_cachecache=D:\Program Files\nodejs\node_cacherefistry=你的私服地址always-auth=true()_auth=a2ZnZW8tcmVsZWFzZTpLZmdlbzIwMTkhregistry=你的私服地址
components文件夹新建一个示例组件假设目录名为tableDemo，其中结构如下：
rolMap.js，olTable.js，style.less中代码如下
olMap.js
//olMap.jsimport 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 ponent {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({// 设置挂载点为maptarget: 'map',// 设置图层layers: [// new Tile({// source: new OSM()// })new TileLayer({source: new XYZ({url: 'https://{a-c}./{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.jsimport 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 -gmkdir react-quote-democd react-quote-democreate-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_cachecache=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_cachecache=D:\Program Files\nodejs\node_cacherefistry=你的仓库地址registry=你的仓库地址发布成功后在package.json中的dependencies添加 "react-simplify-ol": "1.0.0",执行npm install即可安装这个包。
