feat: add build step to tiny-engine package (opentiny#566)

yy-wow · Jun 11, 2024 · fb41533 · fb41533
1 parent f530e68
commit fb41533
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 9 deletions.
diff --git a/designer-demo/canvas.html b/designer-demo/canvas.html
@@ -260,6 +260,6 @@
         <div><span></span></div>
       </div>
     </div>
-    <script type="module" src="./src/canvas.js"></script>
+    <script type="module" src="/src/canvas.js"></script>
   </body>
 </html>
diff --git a/designer-demo/package.json b/designer-demo/package.json
@@ -12,6 +12,8 @@
     "@opentiny/tiny-engine": "workspace:^",
     "@opentiny/tiny-engine-entry": "workspace:^",
     "@opentiny/tiny-engine-configurator": "workspace:*",
+    "@opentiny/tiny-engine-theme-dark": "workspace:*",
+    "@opentiny/tiny-engine-theme-light": "workspace:*",
     "@opentiny/vue": "~3.14.0",
     "@opentiny/vue-design-smb": "~3.14.0",
     "@opentiny/vue-renderless": "~3.14.0",

diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js
@@ -6,7 +6,7 @@ export default defineConfig((options) => {
   const envDir = path.resolve(process.cwd(), 'env')
   const extOptions = {
     ...loadEnv(options.mode, envDir, 'VITE_'),
-    iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')]
+    iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/dist/assets/')]
   }
   const defaultConfig = getDefaultConfig(options, extOptions)
 
@@ -64,7 +64,7 @@ export default defineConfig((options) => {
     '@opentiny/tiny-engine-configurator': path.resolve(__dirname, '../packages/configurator/src/index.js'),
     '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(extOptions.VITE_THEME)
     ? path.resolve(process.cwd(), `../packages/theme/${extOptions.VITE_THEME}/index.less`)
-    // ? path.resolve(process.cwd(), `./node_modules/@opentiny/tiny-engine/node_modules/@opentiny/tiny-engine-theme-${extOptions.VITE_THEME}/dist/style.css`)
+    // ? path.resolve(process.cwd(), `./node_modules/@opentiny/tiny-engine-theme-${extOptions.VITE_THEME}/dist/style.css`)
     : ''
   }
 

diff --git a/packages/build/vite-config/package.json b/packages/build/vite-config/package.json
@@ -9,7 +9,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build"
+    "build": ""
   },
   "dependencies": {
     "@babel/core": "~7.23.2",

diff --git a/packages/design-core/package.json b/packages/design-core/package.json
@@ -19,12 +19,13 @@
     "assets"
   ],
   "exports": {
-    ".": "index.js",
-    "./canvas": "./src/canvas/canvas.js"
+    ".": "./dist/index.js",
+    "./canvas": "./dist/canvas.js"
   },
   "scripts": {
     "preview": "vite preview",
-    "lint": "eslint . --ext .js,.vue,.jsx --fix"
+    "lint": "eslint . --ext .js,.vue,.jsx --fix",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build"
   },
   "repository": {
     "type": "git",
@@ -108,6 +109,8 @@
     "vue-i18n": "^9.9.0"
   },
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

diff --git a/packages/design-core/src/preview/src/main.js b/packages/design-core/src/preview/src/main.js
@@ -15,13 +15,13 @@ import initSvgs from '@opentiny/tiny-engine-svgs'
 import { defineEntry, mergeRegistry } from '@opentiny/tiny-engine-entry'
 import defaultRegistry from '../../../registry.js'
 import App from './App.vue'
-import 'virtual:svg-icons-register'
 
 export const initPreview = ({ registry }) => {
   const mergedRegistry = mergeRegistry(registry, defaultRegistry)
   defineEntry(mergedRegistry)
 
-  import(`../../theme/${mergedRegistry.config.theme || 'light'}.js`)
+  // TODO: 后续需要方案
+  // import(`../../theme/${mergedRegistry.config.theme || 'light'}.js`)
 
   const app = createApp(App)
 

diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js
@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import nodeGlobalsPolyfillPluginCjs from '@esbuild-plugins/node-globals-polyfill'
+import nodeModulesPolyfillPluginCjs from '@esbuild-plugins/node-modules-polyfill'
+import nodePolyfill from 'rollup-plugin-polyfill-node'
+import { fileURLToPath } from 'node:url'
+
+const nodeGlobalsPolyfillPlugin = nodeGlobalsPolyfillPluginCjs.default
+const nodeModulesPolyfillPlugin = nodeModulesPolyfillPluginCjs.default
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  publicDir: false,
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [
+        nodeGlobalsPolyfillPlugin({
+          process: true,
+          buffer: true
+        }),
+        nodeModulesPolyfillPlugin()
+      ]
+    }
+  },
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true,
+      exclude: ['node_modules/*monaco-editor*/**', 'node_modules/lodash-es/**', 'node_modules/@types/lodash-es/**']
+    },
+    minify: true,
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, 'index.js'),
+        canvas: path.resolve(__dirname, './src/canvas/canvas.js')
+      },
+      name: 'tiny-engine',
+      fileName: (_, entryName) => `${entryName}.js`,
+      formats: ['es']
+    },
+    rollupOptions: {
+      plugins: [nodePolyfill({ include: null })],
+      output: {
+        banner: (chunk) => {
+          if (chunk.name === 'index') {
+            return 'import "./style.css"'
+          }
+        }
+      },
+      external: ['vue', 'monaco-editor', 'prettier', /@opentiny\/vue.*/]
+    }
+  }
+})