fix: 修复esm编译

.env

@@ -5,7 +5,7 @@ PROXY=/Cityinterface:http://192.168.12.116:8015;/PandaOMS:http://192.168.12.116:
 # PROXY2 = test : http://localhost:8006/
 
 # 本地应用启动的host域名
-HOST = 192.168.12.192
+HOST = 127.0.0.1
 
 # 本地应用启动的端口
  PORT = 3001

babel.config.js

@@ -3,16 +3,39 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        modules: false,
+        'exclude': [
+          'transform-typeof-symbol',
+          'transform-unicode-regex',
+          'transform-sticky-regex',
+          'transform-new-target',
+          'transform-modules-umd',
+          'transform-modules-systemjs',
+          'transform-modules-amd',
+          'transform-literals',
+        ],
+        'modules': false,
       },
     ],
-    '@babel/preset-react',
+    ['@babel/preset-typescript'],
+    ['@babel/preset-react'],
   ],
   plugins: [
     'styled-components',
-    '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-proposal-optional-chaining', { 'loose': false }],
+    ['@babel/plugin-proposal-nullish-coalescing-operator', { 'loose': false }],
+    '@babel/plugin-syntax-top-level-await',
+    ['@babel/plugin-transform-destructuring', { 'loose': false }],
+    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
+    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
+    '@babel/plugin-proposal-export-default-from',
+    ['@babel/plugin-proposal-pipeline-operator', { 'proposal': 'minimal' }],
+    '@babel/plugin-proposal-do-expressions',
+    '@babel/plugin-proposal-function-bind',
+    '@babel/plugin-proposal-logical-assignment-operators',
     '@babel/plugin-syntax-dynamic-import',
-    ['import', { libraryName: 'antd', style: true }],
+    ['babel-plugin-transform-react-remove-prop-types', { 'removeImport': true }],
+    ['babel-plugin-react-require'],
+    ['babel-plugin-import', { 'libraryName': 'antd', 'libraryDirectory': 'es', 'style': true }, 'antd'],
   ],
   env: {
     production: {
@@ -21,14 +44,14 @@ module.exports = {
         'lodash',
         'transform-react-remove-prop-types',
         '@babel/plugin-transform-react-inline-elements',
-        '@babel/plugin-transform-react-constant-elements',
+        '@babel/plugin-transform-react-constant-elements'
       ],
     },
+    development: {
+      plugins: ['react-refresh/babel']
+    },
     test: {
-      plugins: [
-        '@babel/plugin-transform-modules-commonjs',
-        'dynamic-import-node',
-      ],
+      plugins: ['@babel/plugin-transform-modules-commonjs', 'dynamic-import-node']
     },
   },
 };

internals/webpack/webpack.base.babel.js

@@ -3,6 +3,8 @@ const webpack = require('webpack');
 const slash = require('slash2');
 const CopyPlugin = require('copy-webpack-plugin');
 const cesiumSource = './node_modules/cesium/Build/Cesium';
+const FastRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const nodeLibs = require('node-libs-browser');
 console.log();
 module.exports = options => ({
   mode: options.mode,
@@ -22,10 +24,6 @@ module.exports = options => ({
     // 允许Cesium兼容 webpack的require方式
     toUrlUndefined: true,
   },
-  node: {
-    // 解决fs模块的问题（Resolve node module use of fs）
-    fs: 'empty',
-  },
   module: {
     rules: [
       {
@@ -33,11 +31,11 @@ module.exports = options => ({
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          // options: options.babelQuery,
-          options: {
-            presets: ['@babel/preset-typescript'],
-            plugins: ['@babel/plugin-proposal-optional-chaining'],
-          },
+          options: options.babelQuery,
+          // options: {
+          //   presets: ['@babel/preset-typescript'],
+          //   plugins: ['@babel/plugin-proposal-optional-chaining'],
+          // },
         },
       },
       {
@@ -178,6 +176,12 @@ module.exports = options => ({
       NODE_ENV: 'development',
     }),
 
+    new webpack.ProvidePlugin({
+      process: nodeLibs.process
+    }),
+    new FastRefreshPlugin({
+      overlay: false
+    }),
     new CopyPlugin([
       {
         from: path.resolve(process.cwd(), './public'),
@@ -212,6 +216,19 @@ module.exports = options => ({
       '@': path.resolve(process.cwd(), './src'),
       components: path.resolve(process.cwd(), './src/components'),
       cesium: path.resolve(process.cwd(), cesiumSource),
+      react: path.resolve(process.cwd(), './node_modules/react'),
+    },
+    fallback: {
+      ...Object.keys(nodeLibs).reduce((memo, key) => {
+        if (nodeLibs[key]) {
+          memo[key] = nodeLibs[key];
+        } else {
+          memo[key] = false;
+        }
+        return memo;
+      }, {}),
+      http: false,
+      https: false,
     },
   },
   devtool: options.devtool,

internals/webpack/webpack.dev.babel.js

@@ -36,10 +36,10 @@ module.exports = require('./webpack.base.babel')({
       inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
       template: 'src/index.html',
     }),
-    new CircularDependencyPlugin({
-      exclude: /a\.js|node_modules/, // exclude node_modules
-      failOnError: false, // show a warning when there is a circular dependency
-    }),
+    // new CircularDependencyPlugin({
+    //   exclude: /a\.js|node_modules/, // exclude node_modules
+    //   failOnError: false, // show a warning when there is a circular dependency
+    // }),
   ],
   devtool: 'cheap-module-source-map',
   node: {

package.json

@@ -90,6 +90,9 @@
         "@babel/preset-typescript": "^7.12.1",
         "@babel/runtime": "^7.10.5",
         "@wisdom-cesium/cesium": "^1.0.29",
+        "@wisdom-map/arcgismap": "^1.0.79-26",
+        "@esri/arcgis-html-sanitizer": "2.9.1",
+        "@esri/calcite-colors": "6.0.3",
         "ace-builds": "^1.4.12",
         "antd-img-crop": "^3.13.2",
         "bizcharts": "^4.0.15",
@@ -102,12 +105,10 @@
         "express": "4.16.4",
         "fontfaceobserver": "2.1.0",
         "gojs": "2.1.49",
-    "react-dnd-html5-backend": "latest",
-    "react-dnd": "latest",
-    "immutability-helper": "latest",
         "history": "4.9.0",
         "hoist-non-react-statics": "3.3.0",
         "immer": "3.0.0",
+        "immutability-helper": "latest",
         "immutable": "^4.0.0-rc.12",
         "intl": "1.2.5",
         "invariant": "2.2.4",
@@ -118,6 +119,8 @@
         "react": "16.14.0",
         "react-ace": "^9.2.0",
         "react-copy-to-clipboard": "^5.0.4",
+        "react-dnd": "latest",
+        "react-dnd-html5-backend": "latest",
         "react-dom": "16.14.0",
         "react-grid-layout": "^1.2.5",
         "react-helmet": "6.0.0-beta",
@@ -144,6 +147,15 @@
         "@ant-design/pro-table": "^2.5.3",
         "@babel/cli": "7.4.3",
         "@babel/core": "7.4.3",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-proposal-decorators": "^7.17.9",
+        "@babel/plugin-proposal-export-default-from": "^7.16.7",
+        "@babel/plugin-proposal-pipeline-operator": "^7.17.6",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+        "@babel/plugin-proposal-do-expressions": "^7.16.7",
+        "@babel/plugin-proposal-function-bind": "^7.16.7",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
+        "babel-plugin-react-require": "^3.1.3",
         "@babel/plugin-proposal-class-properties": "7.4.0",
         "@babel/plugin-syntax-dynamic-import": "7.2.0",
         "@babel/plugin-transform-modules-commonjs": "7.4.3",
@@ -166,6 +178,8 @@
         "babel-plugin-react-intl": "3.0.1",
         "babel-plugin-styled-components": "1.10.0",
         "babel-plugin-transform-react-remove-prop-types": "0.4.24",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "react-refresh": "^0.9.0",
         "circular-dependency-plugin": "5.0.2",
         "classnames": "^2.2.6",
         "compare-versions": "3.4.0",
@@ -189,9 +203,10 @@
         "eslint-plugin-redux-saga": "1.0.0",
         "file-loader": "3.0.1",
         "html-loader": "0.5.5",
-    "html-webpack-plugin": "3.2.0",
+        "html-webpack-plugin": "^4.4.0",
         "http-proxy-middleware": "^1.0.6",
         "husky": "^2.3.0",
+        "i": "^0.3.7",
         "imports-loader": "0.8.0",
         "jest-cli": "24.7.1",
         "jest-dom": "3.1.3",
@@ -203,6 +218,7 @@
         "moment": "^2.25.3",
         "ngrok": "3.1.1",
         "node-plop": "0.18.0",
+        "npm": "^8.7.0",
         "null-loader": "0.1.1",
         "offline-plugin": "5.0.6",
         "patch-package": "^6.4.7",
@@ -238,9 +254,9 @@
         "svg-url-loader": "2.3.2",
         "terser-webpack-plugin": "1.2.3",
         "url-loader": "1.1.2",
-    "webpack": "4.30.0",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-middleware": "3.6.2",
+        "webpack": "5.70.0",
+        "webpack-cli": "4.2.0",
+        "webpack-dev-middleware": "5.3.0",
         "webpack-hot-middleware": "2.24.3",
         "webpack-pwa-manifest": "4.0.0",
         "whatwg-fetch": "3.0.0",

server/middlewares/addDevMiddlewares.js

@@ -6,9 +6,9 @@ const { addProxyMiddleware } = require('../proxy');
 
 function createWebpackMiddleware(compiler, publicPath) {
   return webpackDevMiddleware(compiler, {
-    logLevel: 'warn',
+    // logLevel: 'warn',
     publicPath,
-    silent: true,
+    // silent: true,
     stats: 'errors-only',
   });
 }
@@ -25,7 +25,7 @@ module.exports = function addDevMiddlewares(app, webpackConfig) {
   addProxyMiddleware(app);
   // Since webpackDevMiddleware uses memory-fs internally to store build
   // artifacts, we use it instead
-  const fs = middleware.fileSystem;
+  const fs = middleware.context.outputFileSystem;
 
   app.get('*', (_req, res) => {
     fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {

src/app.js

+/* eslint-disable */
 import '!file-loader?name=[name].[ext]!./images/favicon.ico';
 import './global.less';
 import '@babel/polyfill';
@@ -7,15 +8,13 @@ import 'sanitize.css/sanitize.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import { ArcGISMap as MapComponent } from '@wisdom-map/arcgismap';
 import { ConfigProvider } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
 import { ConnectedRouter } from 'connected-react-router/immutable';
 import Immutable from 'immutable';
 import { Provider } from 'react-redux';
 
-import { PictureWallProvider } from '@/components/Upload/context';
-
 import configureStore from './configureStore';
 import App from './containers/App';
 import config from './routes/config';
@@ -26,12 +25,12 @@ const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
 const render = () => {
     ReactDOM.render(
-    <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <ConfigProvider locale={zhCN}>
-          {/* <PictureWallProvider> */}
-          <App routesConfig={config} />
-          {/* </PictureWallProvider> */}
+      <Provider store = { store }>
+        <ConnectedRouter history = { history }>
+          <ConfigProvider locale = { zhCN } >
+            { /* <PictureWallProvider> */ }
+            <App routesConfig = { config }/>
+            { /* </PictureWallProvider> */ }
           </ConfigProvider>
           </ConnectedRouter>
         </Provider>,