乐趣区

关于vite:Vite-入门-知识点分享

jiezi

Home | Vite 官网中文文档

  • 社区插件：https://github.com/vitejs/awe…
  • 应用感触：Vite 本质是对各场景下的最佳计划的整合

react 罕用配置 

import {defineConfig} from "vite";
import path from "path";
import reactRefresh from "@vitejs/plugin-react-refresh";
import usePluginImport from "vite-plugin-importer";

export default defineConfig({
  resolve: {
    alias: {app: path.resolve(__dirname, "./src"),
    },
  },
  plugins: [reactRefresh(),
    {
      ...usePluginImport({
        libraryName: "xxx/ui",
        libraryDirectory: "es/components",
        customName: (name) => {
          return `@byte-design/ui/es/components/${name.replace(name[0],
            name[0].toLowerCase())}`;
        },
        // @ts-ignore usePluginImport 反对，然而类型束缚不正确
        transformToDefaultImport: false,
        camel2DashComponentName: false,
        style: false,
      }),
      apply: "build",
    },
    {
      ...usePluginImport({
        libraryName: "xxx/icons",
        libraryDirectory: "icons",
        style: false,
        camel2DashComponentName: false,
      }),
      apply: "build",
    },
    {
      ...usePluginImport({
        libraryName: "xxx/hooks",
        libraryDirectory: "lib",
        style: false,
        camel2DashComponentName: false,
      }),
      apply: "build",
    },
  ],
  build: {
    lib: {entry: path.resolve(__dirname, "src/index.ts"),
      name: "brand_components",
    },
    // minify: false,
    sourcemap: true,
    rollupOptions: {
      external: [
        "axios",
        "react",
        "react-router-dom",
        "react-dom",
        /\xxx\/ui/,
        /\xxx\/icons/,
        /\xxx\/hooks/,
      ],
    },
  },
});

知识点

Es Module

  • import – JavaScript | MDN
  • 兼容 反对绝大多数古代游览器
动态引入 
// html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="module1.js" type="module"></script>
  </body>
</html>
// module1.js
import {c1} from './module2.js';

console.log(c1())

// module2.js
import {count} from "./module3.js";
export const c1 = () => {return count;};

动静引入 

export const c2 = () => {import("./module4.js").then((res) => {console.log(res.count2);
  });
};
  • 引申：React 组件动静引入
  • 意义：将一些应用场景较少的组件动静引入，缩小外围代码的体积 
import React, {Suspense, lazy, useState} from 'react';


const Head = lazy(() => {return import('@byted/brand-components').then((res) => {
    return {default: res.Head,};
  });
});


const Loading = () => {return <div>loading</div>;};


const LoadHead = () => {
  return (<Suspense fallback={Loading}>
      <Head
        handleLangChange={() => console.log(11)}
        ssoUrl="dasd"
        projectType="aegir"
      />
    </Suspense>
  );
};
export default LoadHead;

[React lazy/Suspense 应用及源码解析
](https://zhuanlan.zhihu.com/p/…)

引申：Commonjs 的动静加载 – 打包的时候如何动静辨认文件

治理依赖 | webpack 中文网

对于，ES Module 来说，这须要经验三个步骤：

  1. 结构 – 查找、下载并解析所有文件到模块记录中
  2. 实例化 – 在内存中寻找一块区域来存储所有导出的变量（但还没有填充值）。而后让 export 和 import 都指向这些内存块。这个过程叫做链接（linking）
  3. 求值 – 在内存块中填入变量的理论值。
    漫画：深入浅出 ES 模块

循环援用

  • CommonJS 模块输入的是一个值的拷贝，ES6 模块输入的是值的援用。
  • CommonJS 模块是运行时加载，ES6 模块是编译时输入接口。

esbuild

  • node_modules 模块的解决 (将 node_modules 申请门路带上 @modules 标识，通过申请代理找到对应的三方模块)

依赖预构建

  • Vite 会将 package.json 中生产依赖 dependencies 进行预构建

  • 兼容 CommonJS 和 AMD 模块的依赖

    • 因为 Vite 的 DevServer 是基于浏览器的 Natvie ES Module 实现的，所以对于应用的依赖如果是 CommonJS 或 AMD 的模块，则须要进行模块类型的转化（ES Module）。
    1. 缩小模块间依赖援用导致过多的申请次数
  • 预构建产物
    https://juejin.cn/post/693040…

应用问题

因为 esbuild 不能疏忽三方包的虚构依赖，导致开发构建谬误
  • 例如虚构滚动：react-virtualized
  • issue: https://github.com/bvaughn/re…

// node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
// 这个为虚构引入
import {bpfrpt_proptype_WindowScroller} from "../WindowScroller.js";
  • 解决方案：

通过 patch-package 对 react-virtualized 打一个本地补丁，将虚构援用给正文，在开发中才有此问题，在打包公布中没有此问题，所以通过补丁解决开发问题，根本无风险

按需引入

  • Vite 社区有多个 import 插件，多多少少都有一些问题（没有残缺的反对 babel-import-plugin 的配置）
  • 最终抉择：vite-plugin-importer（外部应用 babel-import-plugin）
  • vite-plugin-importer 问题
    Option 类型不欠缺，配置 transformToDefaultImport 报类型谬误
    customName 默认大写，须要自行处理

  • 我的项目配置如下：

    import usePluginImport from "vite-plugin-importer";
 
plugins: [reactRefresh(),
  {
    ...usePluginImport({
      libraryName: "xxxx/ui",
      libraryDirectory: "es/components",
      customName: (name) => {
        return `xxx/ui/es/components/${name.replace(name[0],
          name[0].toLowerCase())}`;
      },
      // @ts-ignore usePluginImport 反对，然而类型束缚不正确
      transformToDefaultImport: false,
      camel2DashComponentName: false,
      style: false,
    }),
    apply: "build",
  },
  {
    ...usePluginImport({
      libraryName: "xxx/icons",
      libraryDirectory: "icons",
      style: false,
      camel2DashComponentName: false,
    }),
    apply: "build",
  },
],

内部依赖问题

  • 按需引入和内部依赖配置共存时候，间接配置按需生效的
  • 起因是：按需先执行会转换成门路，导致解决内部依赖时门路匹配不到
  • 解决办法：通过正则配置 external
external: [
 "axios",
 "react",
 "react-router-dom",
 "react-dom",
 "@byted/hooks",
 /\xxx\/ui/,
 /\xxx\/icons/,
],
退出移动版