打包成可用组件

Author: shadowings-zy

lib.webpack.config.js

@@ -0,0 +1,32 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/components/index.js',
+  output: {
+    filename: 'map-viz.js',
+    path: path.join(__dirname, '/lib/')
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.css', '.json']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ['awesome-typescript-loader']
+      },
+      {
+        test: /\.ts?$/,
+        use: ['awesome-typescript-loader']
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.json$/,
+        use: ['json-loader']
+      }
+    ]
+  }
+};

lib/map-viz.js

@@ -1,7 +1,13 @@
 {
-  "name": "map-viz-for-react",
+  "name": "wuhan2020-map-viz",
   "version": "0.1.0",
-  "private": true,
+  "description": "map visualization components for wuhan 2020",
+  "repository": "wuhan2020/map-viz",
+  "license": "MIT",
+  "keywords": [
+    "wuhan2020"
+  ],
+  "author": "shadowings-zy",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -18,11 +24,22 @@
     "react-scripts": "3.3.1",
     "typescript": "~3.7.2"
   },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "awesome-typescript-loader": "^5.2.1",
+    "browserslist": "^4.8.6",
+    "css-loader": "^3.4.2",
+    "json-loader": "^0.5.7",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lib": "npx webpack --config lib.webpack.config.js"
   },
   "eslintConfig": {
     "extends": "react-app"

package.json

@@ -0,0 +1,7 @@
+import { HierarchicalVirusMap } from './virusMap/hierarchicalVirusMap';
+import { InformationMap } from './informationMap/informationMap';
+
+export {
+  HierarchicalVirusMap,
+  InformationMap
+}

src/components/index.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { BaiduMap } from './baiduMap';
-import markerIcon from './marker.json';
+import markerIcon from './marker';
 import './style.css';
 
 type InquiryMeta = [string, number | string | boolean];

src/components/informationMap/informationMap.tsx

@@ -1,4 +1,4 @@
-{
+export default {
   "hospital": "http://i2.tiimg.com/708620/f869afffd7f03d19.png",
   "hotel": "http://i2.tiimg.com/708620/ad73337602f2cc9b.png",
   "others": "http://i2.tiimg.com/708620/15e58afc32dfc7bf.png"

src/components/informationMap/marker.json renamed to src/components/informationMap/marker.ts

@@ -11,7 +11,7 @@
 
 import React from 'react';
 import { ReactEcharts } from './reactEcharts';
-import provinceName from '../../data/isaaclin/provinces.json';
+import provinceName from '../../data/map/provinces';
 
 type Props = {
   data: any;

src/components/virusMap/virusChart.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { EchartsMap } from './echartsMap';
 import { VirusChart } from './virusChart';
-import mapUrls from '../../data/map/mapDict.json';
+import mapUrls from '../../data/map/district';
 import './style.css';
 
 type MapDataType = {

src/components/virusMap/virusMap.tsx

@@ -1,4 +1,4 @@
-{
+export default {
   "中国": "https://map-1252957949.cos.ap-guangzhou.myqcloud.com/china.json",
   "世界": "https://map-1252957949.cos.ap-guangzhou.myqcloud.com/world.json",
   "安徽": "https://map-1252957949.cos.ap-guangzhou.myqcloud.com/china/anhui.json",