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.