@ywfe/cli/config/vite.config.js

遥望前端开发命令行工具

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import NodeModulesPolyfillPlugin from '@esbuild-plugins/node-modules-polyfill';
import visualizer from 'rollup-plugin-visualizer';
import { viteExternalsPlugin } from 'vite-plugin-externals';
import dns from 'dns';
import htmlTransformPlugin from '../plugins/htmlTransformPlugin';  
import replace from'@rollup/plugin-replace';

dns.setDefaultResultOrder('verbatim');

export default ({ mode, command, ...props }) => {
  return defineConfig({
    mode: 'production',
    root: command === 'build' ? process.cwd() : './vite',
    cacheDir: path.join(process.cwd(), 'node_modules/.vite'),
    clearScreen: false,
    build: {
      sourcemap: false,
      target: 'es2015',
      lib: {
        entry: path.join(process.cwd(), 'ENTRY_PAGE_PATH'),
        name: 'LIB_PAGE_NAME',
        fileName: 'FILE_PAGE_NAME',
        formats: ['umd'],
      },
      minify: true,
      emptyOutDir: false,
      rollupOptions: {
        plugins: [nodePolyfills()],
        external: ['@ywfe/request', '@ywfe/yw-design'],
        output: {
          assetFileNames: 'FILE_PAGE_NAME.umd.[ext]',
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          globals: {
            '@ywfe/request': 'YWRequest',
            '@ywfe/yw-design': 'YwDesign',
          },
        },
      },
    },

    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
        plugins: [NodeModulesPolyfillPlugin()],
      },
      // force: true,
    },

    plugins: [
      react({
        jsxRuntime: 'classic',
        babel:{
          plugins: [
            [
                'babel-plugin-styled-components',
                {
                    displayName: true,
                    fileName: false,
                    // transpileTemplateLiterals: true,
                    // ssr: true,
                }
            ]
          ]
        }
      }),
      viteExternalsPlugin({
        react: 'React',
        'react-dom': 'ReactDOM',
        antd: 'antd',
        '@ant-design/icons': 'icons',
        moment: 'moment',
        '@ant-design/pro-table': 'ProTable',
        '@ant-design/charts': 'charts',
        ppfish: 'ppfish',
        '@ywfe/router': 'YWRouter',
        '@ywfe/yw-design': 'YwDesign',
      }),
      replace({
        preventAssignment: true,
        'process.env.REACT_APP_ENV': JSON.stringify(mode),
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      visualizer({
        filename: 'dist/stats.html',
      }),
      htmlTransformPlugin(),
    ],

    css: {
      postcss: {
        to: 'FILE_PAGE_NAME',
      },
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },

    server: {
      port: 3001,
    },

    resolve: {
      alias: [
        {
          find: '~antd',
          replacement: path.resolve(process.cwd(), 'node_modules/antd'),
        },
        {
          find: 'styled-components',
          replacement: path.resolve(process.cwd(), 'node_modules/styled-components'),
        },
        {
          find: '@node_modules',
          replacement: path.resolve(process.cwd(), 'node_modules/'),
        },
        {
          find: '@cli',
          replacement: path.resolve(__dirname, '../node_modules/'),
        },
        {
          find: '@',
          replacement: path.resolve(process.cwd(), 'src/'),
        },
        {
          find: '@pages',
          replacement: path.resolve(process.cwd(), 'src/pages'),
        },
        {
          find: '@utils',
          replacement: path.resolve(process.cwd(), 'src/utils'),
        },
        {
          find: '@components',
          replacement: path.resolve(process.cwd(), 'src/components'),
        },
        {
          find: '@generated',
          replacement: path.resolve(process.cwd(), 'src/generated'),
        },
        {
          find: '@constants',
          replacement: path.resolve(process.cwd(), 'src/constants'),
        },
        {
          find: '@useHooks',
          replacement: path.resolve(process.cwd(), 'src/useHooks'),
        },
        {
          find: '@assets',
          replacement: path.resolve(process.cwd(), 'src/assets'),
        },
        {
          find: 'process',
          replacement: 'rollup-plugin-node-polyfills/polyfills/process-es6',
        },
      ],
    },
  });
};