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"