From feb965b11d3501525847d770555cf86d80977d1a Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Mon, 6 May 2024 01:00:14 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=99=A8=E5=85=BC=E5=AE=B9=E7=AD=96=E7=95=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc.json | 27 +++++ src/main.tsx | 4 +- vite.config.ts | 321 ++++++++++++++++++++++++------------------------- 3 files changed, 188 insertions(+), 164 deletions(-) create mode 100644 .babelrc.json diff --git a/.babelrc.json b/.babelrc.json new file mode 100644 index 0000000..1014c8d --- /dev/null +++ b/.babelrc.json @@ -0,0 +1,27 @@ +{ + "plugins": [ + [ + "@babel/plugin-transform-runtime", + { + "corejs": 3 + } + ] + ], + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "ie": "11", + "chrome": "58", + "safari": "11.1", + "firefox": "63", + "edge": "16" + }, + "corejs": 3, + "useBuiltIns": "usage", + "modules": false + } + ] + ] +} diff --git a/src/main.tsx b/src/main.tsx index dd9985a..314bdae 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,8 +6,8 @@ import routeConfig from './router' import 'virtual:svg-icons-register' import { Provider as MobxProvider } from 'mobx-react' import { RootStore } from '@/store' -import 'core-js/stable' -import 'regenerator-runtime/runtime' +import 'core-js'; +import 'regenerator-runtime/runtime'; const router = createBrowserRouter(routeConfig) ReactDOM.createRoot(document.getElementById('root')!).render( // diff --git a/vite.config.ts b/vite.config.ts index ee4c2d7..21c0a1c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,173 +1,170 @@ -import { defineConfig, loadEnv } from 'vite' +import {defineConfig, loadEnv} from 'vite' import react from '@vitejs/plugin-react' -import { resolve } from 'path' +import {resolve} from 'path' // icons plugin -import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' +import {createSvgIconsPlugin} from 'vite-plugin-svg-icons' import * as path from 'path' import imagemin from 'unplugin-imagemin/vite' import viteCompression from 'vite-plugin-compression' -import { createHtmlPlugin } from 'vite-plugin-html' -// import legacy from '@vitejs/plugin-legacy' -import { babel } from '@rollup/plugin-babel' +import {createHtmlPlugin} from 'vite-plugin-html' +import legacy from '@vitejs/plugin-legacy' import postcssPresetEnv from 'postcss-preset-env' import autoprefixer from 'autoprefixer' // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error //配置参数 -export default defineConfig(({ mode }) => { - const env = loadEnv(mode, process.cwd()) - return { - base: '/', - plugins: [ - react(), - // legacy({ - // targets: ['ie >= 11', 'chrome 52', 'Chrome > 70', 'Safari 12.1', 'ios >= 12.3'], - // additionalLegacyPolyfills: ['regenerator-runtime/runtime'], - // renderLegacyChunks: true, - // polyfills: ['es.promise.all-settled', 'es.object.entries'], - // modernPolyfills: ['es.promise.all-settled', 'es.object.entries'], - // }), - // 修改 icons 相关配置 - createSvgIconsPlugin({ - // 指定需要缓存的图标文件夹 - iconDirs: [path.resolve(__dirname, './src/assets/icons')], - // 指定symbolId格式 - symbolId: 'icon-[dir]-[name]', - }), - imagemin({ - // Default mode sharp. support squoosh and sharp - mode: 'sharp', - beforeBundle: true, - // Default configuration options for compressing different pictures - compress: { - jpg: { - quality: 10, - }, - jpeg: { - quality: 10, - }, - png: { - quality: 10, - }, - webp: { - quality: 10, - }, - }, - conversion: [ - { from: 'jpeg', to: 'webp' }, - { from: 'png', to: 'webp' }, - { from: 'JPG', to: 'jpeg' }, - ], - }), - viteCompression({ - verbose: true, // 是否在控制台中输出压缩结果 - disable: false, - threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反 - algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw'] - ext: '.gz', - deleteOriginFile: true, // 源文件压缩后是否删除 - }), - createHtmlPlugin({ - minify: true, - /** - * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除 - * @default src/main.ts - */ - entry: 'src/main.tsx', - /** - * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置 - * @default index.html - */ - template: 'index.html', - /** - * 需要注入 index.html ejs 模版的数据 - */ - inject: { - data: { - title: env.VITE_TITLE_NAME, - }, - }, - }), - ], - resolve: { - alias: { - '@': resolve(__dirname, 'src'), - }, - extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 默认值，这些文件引入时不需要写后缀 - }, - css: { - modules: { - // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义 - // 其中，name 表示当前文件名，local 表示类名 - generateScopedName: '[name]__[local]___[hash:base64:5]', - }, - postcss: { - plugins: [ - postcssPresetEnv(), - autoprefixer({ - // 自动添加前缀 - overrideBrowserslist: [ - 'Android 4.1', - 'iOS 7.1', - 'Chrome > 31', - 'ff > 31', - 'ie >= 8', - ], - }), - ], - }, - preprocessorOptions: { - less: { - javascriptEnabled: true, - }, - }, - }, - esbuild: { - drop: ['console', 'debugger'], - }, - build: { - outDir: 'dist', // 指定输出路径 - assetsDir: 'assets', // 指定生成静态文件目录 - assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码 - cssCodeSplit: true, // 启用 CSS 代码拆分 - sourcemap: false, // 构建后是否生成 source map 文件 - minify: 'esbuild', // 指定使用哪种混淆器 - write: true, // 启用将构建后的文件写入磁盘 - emptyOutDir: true, // 构建时清空该目录 - brotliSize: true, // 启用 brotli 压缩大小报告 - chunkSizeWarningLimit: 2000, // chunk 大小警告的限制 - watch: null, // 设置为 {} 则会启用 rollup 的监听器 - rollupOptions: { - plugins: [ - // https://www.npmjs.com/package/@rollup/plugin-babel - babel({ - babelHelpers: 'bundled', - presets: [ - [ - '@babel/preset-env', - { - useBuiltIns: 'entry', // 注意这里只能使用 entry - corejs: '3', - targets: 'last 2 versions and not dead, > 0.2%, Firefox ESR', - }, - ], - ], - plugins: [], - compact: false, - }), - ], - }, - }, - server: { - proxy: { - [env.VITE_APP_BASE_API]: { - //后端接口的baseurl - target: env.VITE_API_BASE_URL, - //是否允许跨域 - changeOrigin: true, - rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ''), - }, - }, - }, - } +export default defineConfig(({mode}) => { + const env = loadEnv(mode, process.cwd()) + return { + base: '/', + plugins: [ + react(), + legacy({ + targets: ['ie >= 11', 'chrome 52', 'Chrome > 70', 'Safari 12.1', 'last 2 versions and since 2018 and > 0.5%', 'iOS >= 9','Android >= 4.4','last 2 versions'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'], + renderLegacyChunks: true, + polyfills: [ + 'es.promise.all-settled', + 'es.symbol', + 'es.array.filter', + 'es.promise', + 'es.promise.finally', + 'es/map', + 'es/set', + 'es.array.for-each', + 'es.object.define-properties', + 'es.object.define-property', + 'es.object.get-own-property-descriptor', + 'es.object.get-own-property-descriptors', + 'es.object.keys', + 'es.object.to-string', + 'web.dom-collections.for-each', + 'esnext.global-this', + 'esnext.string.match-all' + ], + modernPolyfills: ['es.promise.all-settled', 'es.object.entries', 'es.string.replace-all'], + }), + // 修改 icons 相关配置 + createSvgIconsPlugin({ + // 指定需要缓存的图标文件夹 + iconDirs: [path.resolve(__dirname, './src/assets/icons')], + // 指定symbolId格式 + symbolId: 'icon-[dir]-[name]', + }), + imagemin({ + // Default mode sharp. support squoosh and sharp + mode: 'sharp', + beforeBundle: true, + // Default configuration options for compressing different pictures + compress: { + jpg: { + quality: 10, + }, + jpeg: { + quality: 10, + }, + png: { + quality: 10, + }, + webp: { + quality: 10, + }, + }, + conversion: [ + {from: 'jpeg', to: 'webp'}, + {from: 'png', to: 'webp'}, + {from: 'JPG', to: 'jpeg'}, + ], + }), + viteCompression({ + verbose: true, // 是否在控制台中输出压缩结果 + disable: false, + threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反 + algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw'] + ext: '.gz', + deleteOriginFile: true, // 源文件压缩后是否删除 + }), + createHtmlPlugin({ + minify: true, + /** + * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除 + * @default src/main.ts + */ + entry: 'src/main.tsx', + /** + * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置 + * @default index.html + */ + template: 'index.html', + /** + * 需要注入 index.html ejs 模版的数据 + */ + inject: { + data: { + title: env.VITE_TITLE_NAME, + }, + }, + }), + ], + resolve: { + alias: { + '@': resolve(__dirname, 'src'), + }, + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 默认值，这些文件引入时不需要写后缀 + }, + css: { + modules: { + // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义 + // 其中，name 表示当前文件名，local 表示类名 + generateScopedName: '[name]__[local]___[hash:base64:5]', + }, + postcss: { + plugins: [ + postcssPresetEnv(), + autoprefixer({ + // 自动添加前缀 + overrideBrowserslist: [ + 'Android 4.1', + 'iOS 7.1', + 'Chrome > 31', + 'ff > 31', + 'ie >= 8', + ], + }), + ], + }, + preprocessorOptions: { + less: { + javascriptEnabled: true, + }, + }, + }, + esbuild: { + drop: ['console', 'debugger'], + }, + build: { + outDir: 'dist', // 指定输出路径 + assetsDir: 'assets', // 指定生成静态文件目录 + assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码 + cssCodeSplit: true, // 启用 CSS 代码拆分 + sourcemap: false, // 构建后是否生成 source map 文件 + minify: 'esbuild', // 指定使用哪种混淆器 + write: true, // 启用将构建后的文件写入磁盘 + emptyOutDir: true, // 构建时清空该目录 + brotliSize: true, // 启用 brotli 压缩大小报告 + chunkSizeWarningLimit: 2000, // chunk 大小警告的限制 + watch: null, // 设置为 {} 则会启用 rollup 的监听器 + }, + server: { + proxy: { + [env.VITE_APP_BASE_API]: { + //后端接口的baseurl + target: env.VITE_API_BASE_URL, + //是否允许跨域 + changeOrigin: true, + rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ''), + }, + }, + }, + } })