refactor: adjust the umd compilation process of the ui library (#1206)

* chore: adjust the code style

* refactor: adjust the umd compilation process of the ui library

packages/antd/package.json

@@ -22,7 +22,7 @@
   },
   "scripts": {
     "start": "dumi dev",
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:style",
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style",
     "build:style": "ts-node build-style",
     "build:cjs": "tsc --declaration",
     "build:esm": "tsc --declaration --module es2015 --outDir esm",

packages/antd/rollup.config.js

@@ -1,21 +1,9 @@
-import baseConfig from '../../scripts/rollup.base.js'
-import postcss from 'rollup-plugin-postcss'
-import NpmImport from 'less-plugin-npm-import'
-import path from 'path'
+import baseConfig, {
+  removeImportStyleFromInputFilePlugin,
+} from '../../scripts/rollup.base.js'
 
 export default baseConfig(
   'formily.antd',
   'Formily.Antd',
-  postcss({
-    extract: path.resolve('dist/antd.css'),
-    use: [
-      [
-        'less',
-        {
-          javascriptEnabled: true,
-          plugins: [new NpmImport({ prefix: '~' })],
-        },
-      ],
-    ],
-  })
+  removeImportStyleFromInputFilePlugin()
 )

packages/next/package.json

@@ -22,7 +22,7 @@
   },
   "scripts": {
     "start": "dumi dev",
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:style",
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style",
     "build:style": "ts-node build-style",
     "build:cjs": "tsc --declaration",
     "build:esm": "tsc --declaration --module es2015 --outDir esm",

packages/next/rollup.config.js

@@ -1,11 +1,9 @@
-import baseConfig from '../../scripts/rollup.base.js'
-import postcss from 'rollup-plugin-postcss'
-import path from 'path'
+import baseConfig, {
+  removeImportStyleFromInputFilePlugin,
+} from '../../scripts/rollup.base.js'
 
 export default baseConfig(
   'formily.next',
   'Formily.Next',
-  postcss({
-    extract: path.resolve('dist/next.css'),
-  })
+  removeImportStyleFromInputFilePlugin()
 )

scripts/build-style/buildAllStyles.ts

@@ -36,7 +36,6 @@ const generateCssStyleInject = async (cssFilePath: string) => {
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const buildAllStyles = async (outputFile: string) => {
-
   await build({
     input: 'src/style.ts',
     output: {

scripts/rollup.base.js

@@ -1,3 +1,4 @@
+import path from 'path'
 import typescript from 'rollup-plugin-typescript2'
 import resolve from 'rollup-plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
@@ -43,6 +44,19 @@ const presets = () => [
   ),
 ]
 
+const inputFilePath = path.join(process.cwd(), 'src/index.ts')
+export const removeImportStyleFromInputFilePlugin = () => ({
+  name: 'remove-import-style-from-input-file',
+  transform(code, id) {
+    // 样式由 build:style 进行打包，所以要删除入口文件上的 `import './style'`
+    if (inputFilePath === id) {
+      return code.replace(`import './style';`, '')
+    }
+
+    return code
+  },
+})
+
 export default (filename, targetName, ...plugins) => [
   {
     input: 'src/index.ts',