feat(amis-saas-8288): amis-editor-core增加构建es m模块

Change-Id: Ie8f33d693ba15acd457571ff6128434b352cc760

packages/amis-editor-core/package.json

@@ -1,12 +1,13 @@
 {
   "name": "amis-editor-core",
-  "version": "5.2.1-beta.19",
+  "version": "5.2.1-beta.22",
   "description": "amis 可视化编辑器",
-  "main": "lib/index.min.js",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm run clean-dist && webpack",
+    "build": "npm run clean-dist && NODE_ENV=production rollup -c && webpack",
     "clean-dist": "rimraf lib/* esm/*",
     "i18n:update": "npx i18n update --config=./i18nConfig.js",
     "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US",
@@ -19,20 +20,26 @@
   "author": "@fex",
   "license": "ISC",
   "files": [
-    "lib"
+    "lib",
+    "esm"
   ],
   "dependencies": {
     "deep-diff": "1.0.2",
     "json-ast-comments": "^1.1.0",
-    "react-json-view": "^1.21.3",
     "lodash": "^4.17.15",
     "mobx": "^4.5.0",
     "mobx-react": "^6.3.1",
     "mobx-state-tree": "^3.17.3",
+    "react-json-view": "^1.21.3",
     "sortablejs": "^1.14.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@svgr/rollup": "^6.2.1",
     "@svgr/webpack": "^5.5.0",
     "@types/async": "^2.0.45",
     "@types/classnames": "^2.2.3",
@@ -69,6 +76,10 @@
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "rimraf": "^3.0.2",
+    "rollup": "^2.73.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-license": "^2.7.0",
+    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.49.7",
     "sass-loader": "^12.5.0",
     "style-loader": "^3.2.1",

packages/amis-editor-core/rollup.config.js

@@ -0,0 +1,166 @@
+// rollup.config.js
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import license from 'rollup-plugin-license';
+import autoExternal from 'rollup-plugin-auto-external';
+import {
+  name,
+  version,
+  author,
+  main,
+  module,
+  dependencies
+} from './package.json';
+import path from 'path';
+import svgr from '@svgr/rollup';
+import fs from 'fs';
+import i18nPlugin from 'plugin-react-i18n';
+const {terser} = require('rollup-plugin-terser'); // 压缩
+
+const i18nConfig = require('./i18nConfig');
+
+const settings = {
+  globals: {}
+};
+
+const external = id =>
+  new RegExp(
+    `^(?:${Object.keys(dependencies)
+      .concat(fs.readdirSync(path.join(__dirname, '../../node_modules')))
+      .map(value =>
+        value.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')
+      )
+      .join('|')})`
+  ).test(id);
+const input = './src/index.ts';
+
+export default [
+  {
+    input,
+
+    output: [
+      {
+        ...settings,
+        dir: path.dirname(main),
+        format: 'cjs',
+        exports: 'named',
+        preserveModulesRoot: './src',
+        preserveModules: false // Keep directory structure and files
+      }
+    ],
+    external,
+    plugins: getPlugins('cjs')
+  },
+  {
+    input,
+
+    output: [
+      {
+        ...settings,
+        dir: path.dirname(module),
+        format: 'esm',
+        exports: 'named',
+        preserveModulesRoot: './src',
+        preserveModules: false // Keep directory structure and files
+      }
+    ],
+    external,
+    plugins: getPlugins('esm')
+  }
+];
+
+function transpileDynamicImportForCJS(options) {
+  return {
+    name: 'transpile-dynamic-import-for-cjs',
+    renderDynamicImport({format, targetModuleId}) {
+      if (format !== 'cjs') {
+        return null;
+      }
+
+      return {
+        left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
+        right: '], function(mod) {fullfill(tslib.__importStar(mod))})})})'
+      };
+
+      // return {
+      //   left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require.ensure([',
+      //   right:
+      //     '], function(r) {fullfill(_interopDefaultLegacy(r("' +
+      //     targetModuleId +
+      //     '")))})})})'
+      // };
+    }
+  };
+}
+
+function getPlugins(format = 'esm') {
+  const typeScriptOptions = {
+    typescript: require('typescript'),
+    sourceMap: false,
+    outputToFilesystem: true,
+    ...(format === 'esm'
+      ? {
+          compilerOptions: {
+            rootDir: './src',
+            outDir: path.dirname(module)
+          }
+        }
+      : {
+          compilerOptions: {
+            rootDir: './src',
+            outDir: path.dirname(main)
+          }
+        })
+  };
+
+  return [
+    i18nPlugin(i18nConfig),
+    typescript(typeScriptOptions),
+    svgr({
+      svgProps: {
+        className: 'icon'
+      },
+      prettier: false,
+      dimensions: false
+    }),
+    transpileDynamicImportForCJS(),
+    autoExternal(),
+    json(),
+    resolve({
+      jsnext: true,
+      main: true
+    }),
+    commonjs({
+      sourceMap: false
+    }),
+    terser(),
+    license({
+      banner: `
+        ${name} v${version}
+        Copyright 2018<%= moment().format('YYYY') > 2018 ? '-' + moment().format('YYYY') : null %> ${author}
+      `
+    }),
+    onRollupError(error => {
+      console.warn(`[构建异常]${error}`);
+      // 构建异常时，删除 tsconfig.tsbuildinfo
+      fs.unlink(path.resolve(__dirname, 'tsconfig.tsbuildinfo'), () => {
+        console.info(
+          '[构建异常]已自动删除tsconfig.tsbuildinfo，请重试构建命令。'
+        );
+      });
+    })
+  ];
+}
+
+function onRollupError(callback = () => {}) {
+  return {
+    name: 'onerror',
+    buildEnd(err) {
+      if (err) {
+        callback(err);
+      }
+    }
+  };
+}

packages/amis-editor-core/src/component/Preview.tsx

@@ -80,12 +80,14 @@ export default class Preview extends Component<PreviewProps> {
   }
 
   componentWillUnmount() {
-    this.currentDom.removeEventListener('mouseleave', this.handleMouseLeave);
-    this.currentDom.removeEventListener('mousemove', this.handleMouseMove);
-    this.currentDom.removeEventListener('click', this.handleClick);
-    this.currentDom.removeEventListener('mouseover', this.handeMouseOver);
-    this.currentDom.removeEventListener('mousedown', this.handeMouseDown);
-    this.props.manager.off('after-update', this.handlePanelChange);
+    if (this.currentDom) {
+      this.currentDom.removeEventListener('mouseleave', this.handleMouseLeave);
+      this.currentDom.removeEventListener('mousemove', this.handleMouseMove);
+      this.currentDom.removeEventListener('click', this.handleClick);
+      this.currentDom.removeEventListener('mouseover', this.handeMouseOver);
+      this.currentDom.removeEventListener('mousedown', this.handeMouseDown);
+      this.props.manager.off('after-update', this.handlePanelChange);
+    }
 
     this.scrollLayer?.removeEventListener('scroll', this.handlePanelChange);
 

packages/amis-editor-core/webpack.config.js

@@ -10,7 +10,7 @@ const i18nConfig = require('./i18nConfig');
 module.exports = {
   mode: 'production', // development production
   entry: {
-    index: ['./src/index.ts'],
+    // index: ['./src/index.ts'],
     style: ['./scss/editor.scss']
   },
   output: {