-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1. iife 打包与 es、cjs 打包模式分离 2. 添加打包依赖分析 3. 修复会打包 jsx-runtime 依赖的问题 4. es、cjs 打包排除 @tool-pack/types、@tool-pack/basic、@tool-pack/dom、rxjs，使用依赖代替打包 5. iife 打包会将 react、react-dom 之外的必要依赖都打包进去，减少不必要的 script 导入 6. 使用 vite 插件把 process.env.NODE_ENV 直接替换为 production 7. 组件库的依赖包含 @tool-pack/types、@tool-pack/basic、@tool-pack/dom、rxjs
- Loading branch information
1 parent
0265c7e
commit 0b3d69a
Showing
6 changed files
with
197 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { getCommonViteConfig, getBanner } from './vite.utils'; | ||
| import { type UserConfig, defineConfig } from 'vite'; | ||
|
|
||
| /** | ||
| * Vite configuration | ||
| * https://vitejs.dev/config/ | ||
| */ | ||
| export default defineConfig((): UserConfig => { | ||
| const config = getCommonViteConfig({ | ||
| output: [ | ||
| { | ||
| globals: { | ||
| 'react-dom': 'ReactDOM', | ||
| react: 'React', | ||
| }, | ||
| entryFileNames: '[name].iife.js', | ||
| banner: getBanner('iife'), | ||
| name: 'ToolPackReactUI', | ||
| format: 'iife', | ||
| }, | ||
| ], | ||
| external: ['react', 'react-dom'], | ||
| }); | ||
| config.build.emptyOutDir = false; | ||
| return config; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,42 @@ | ||
| import { defineConfig, UserConfig } from 'vite'; | ||
| import react from '@vitejs/plugin-react'; | ||
| import { getAlias } from '../../utils'; | ||
| import pkg from './package.json'; | ||
| import { resolve } from 'path'; | ||
| import { getCommonViteConfig, getBanner } from './vite.utils'; | ||
| import type { UserConfig } from 'vite'; | ||
| import { defineConfig } from 'vite'; | ||
|
|
||
| function getBanner(format: string) { | ||
| const date = new Date(); | ||
| return ( | ||
| '/*!\n' + | ||
| ` * ToolPackReactUI(${pkg.name}) v${pkg.version}\n` + | ||
| ` * Author: ${pkg.author}\n` + | ||
| ` * Documentation: ${pkg.homepage}\n` + | ||
| ` * License: ${pkg.license}\n` + | ||
| ` * File: index.${format}.js\n` + | ||
| ` * Date: ${date.getFullYear()}-${ | ||
| date.getMonth() + 1 | ||
| }-${date.getDate()}\n` + | ||
| ` */\n` | ||
| ); | ||
| } | ||
|
|
||
| const entryPath = resolve(__dirname, './src/index.ts'); | ||
| type Output = Exclude< | ||
| Exclude<UserConfig['build'], undefined>['rollupOptions'], | ||
| undefined | ||
| >['output']; | ||
| /** | ||
| * Vite configuration | ||
| * https://vitejs.dev/config/ | ||
| */ | ||
| export default defineConfig((): UserConfig => { | ||
| return { | ||
| build: { | ||
| rollupOptions: { | ||
| output: [ | ||
| { | ||
| globals: { | ||
| 'react-dom': 'ReactDom', | ||
| react: 'React', | ||
| }, | ||
| entryFileNames: '[name].iife.js', | ||
| banner: getBanner('iife'), | ||
| name: 'ToolPackReactUI', | ||
| format: 'iife', | ||
| }, | ||
| { | ||
| entryFileNames: '[name].es.js', | ||
| banner: getBanner('es'), | ||
| format: 'es', | ||
| }, | ||
|
|
||
| { | ||
| entryFileNames: '[name].cjs.js', | ||
| banner: getBanner('cjs'), | ||
| format: 'cjs', | ||
| }, | ||
| ], | ||
| external: ['react', 'react-dom'], | ||
| }, | ||
| outDir: resolve(__dirname, './dist'), | ||
| lib: { entry: entryPath }, | ||
| // minify: true, | ||
| cssCodeSplit: true, | ||
| target: 'modules', | ||
| emptyOutDir: true, | ||
| export default defineConfig(({ mode }): UserConfig => { | ||
| const cjsOutput: Output = [ | ||
| { | ||
| entryFileNames: '[name].cjs.js', | ||
| banner: getBanner('cjs'), | ||
| format: 'cjs', | ||
| }, | ||
| plugins: [ | ||
| // https://github.com/vitejs/vite/tree/main/packages/plugin-react | ||
| react({ | ||
| jsxRuntime: 'classic', | ||
| }), | ||
| ], | ||
| resolve: { | ||
| alias: getAlias(), | ||
| ]; | ||
| const output: Output = [ | ||
| { | ||
| entryFileNames: '[name].es.js', | ||
| banner: getBanner('es'), | ||
| format: 'es', | ||
| }, | ||
| cacheDir: `./.cache`, | ||
| }; | ||
| ...(mode !== 'analyze' ? cjsOutput : []), | ||
| ]; | ||
| const config = getCommonViteConfig({ | ||
| external: [ | ||
| 'react', | ||
| 'react-dom', | ||
| // 'prop-types', | ||
| 'rxjs', | ||
| '@tool-pack/basic', | ||
| '@tool-pack/dom', | ||
| ], | ||
| output, | ||
| }); | ||
| config.build.emptyOutDir = true; | ||
| return config; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { replaceCodePlugin } from 'vite-plugin-replace'; | ||
| import { visualizer } from 'rollup-plugin-visualizer'; | ||
| import type { RequiredPart } from '@tool-pack/types'; | ||
| import type { UserConfig, Plugin } from 'vite'; | ||
| // import react from '@vitejs/plugin-react'; | ||
| import { getAlias } from '../../utils'; | ||
| import pkg from './package.json'; | ||
| import { resolve } from 'path'; | ||
|
|
||
| export function getBanner(format: string) { | ||
| const date = new Date(); | ||
| return ( | ||
| '/*!\n' + | ||
| ` * ToolPackReactUI(${pkg.name}) v${pkg.version}\n` + | ||
| ` * Author: ${pkg.author}\n` + | ||
| ` * Documentation: ${pkg.homepage}\n` + | ||
| ` * License: ${pkg.license}\n` + | ||
| ` * File: index.${format}.js\n` + | ||
| ` * Date: ${date.getFullYear()}-${ | ||
| date.getMonth() + 1 | ||
| }-${date.getDate()}\n` + | ||
| ` */\n` | ||
| ); | ||
| } | ||
|
|
||
| const entryPath = resolve(__dirname, './src/index.ts'); | ||
| /** | ||
| * Vite configuration | ||
| * https://vitejs.dev/config/ | ||
| */ | ||
| export function getCommonViteConfig( | ||
| rollupOptions: Exclude<UserConfig['build'], undefined>['rollupOptions'], | ||
| ): RequiredPart<UserConfig, 'build'> { | ||
| return { | ||
| plugins: [ | ||
| // https://github.com/vitejs/vite/tree/main/packages/plugin-react | ||
| // react({ | ||
| // jsxRuntime: 'classic', | ||
| // }), | ||
| replaceCodePlugin({ | ||
| replacements: [ | ||
| { to: JSON.stringify('production'), from: 'process.env.NODE_ENV' }, | ||
| ], | ||
| }), | ||
| { | ||
| ...(visualizer({ filename: 'temp/analyze.html' }) as Plugin), | ||
| apply(_, { mode }) { | ||
| return mode === 'analyze'; | ||
| }, | ||
| }, | ||
| ], | ||
| build: { | ||
| outDir: resolve(__dirname, './dist'), | ||
| lib: { entry: entryPath }, | ||
| target: 'modules', | ||
| // minify: true, | ||
| // cssCodeSplit: true, | ||
| // emptyOutDir: true, | ||
| rollupOptions, | ||
| }, | ||
| // optimizeDeps: { | ||
| // exclude: ['react', 'react-dom', 'react-is', 'rxjs', 'react-jsx-runtime'], | ||
| // }, | ||
| esbuild: { | ||
| tsconfigRaw: { compilerOptions: { jsx: 'react' } }, | ||
| }, | ||
| resolve: { | ||
| alias: getAlias(), | ||
| }, | ||
| cacheDir: `./.cache`, | ||
| }; | ||
| } |
Oops, something went wrong.