使用Vite构建纯js项目

背景

早先搭建了一个简易的网站，只实现了需要的js逻辑，并使用Terser把js代码进行打包，实现了一个静态网站功能。在后续需求中需要根据环境进行区分，不同环境请求不同的后端接口，干脆把打包构建逻辑修改为Vite去实现。

实现步骤

Vite官网：cn.vite.dev/guide/

当前目录结构如下：
使用以下命令下载Vite依赖包：npm install -D vite
添加vite.config.js文件，并添加相应配置

javascript 复制代码

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig(({ mode }) => {
  return {
    root: 'src',  // 逻辑代码都统一放在src目录下
    envDir: '..', // 因为root设置根目录为src，env文件在项目根目录下，所以需要向上找才能取到env环境文件
    base: '/', // 静态资源访问的路径，默认为/
    esbuild: {
      drop: mode === 'production' ? ['console', 'debugger'] : [],  // 默认使用esbuild打包，生产环境下打包去除console、debugger标记
    },
    build: {
      outDir: '../dist', // 打包后的目录设置，因为root设置根目录为src，需要往上一级目录找
      emptyOutDir: true, // 每次打包都清空dist目录
      rollupOptions: {
        input: resolve(__dirname, 'src/index.html'), // 入口文件设置
      },
    },
  };
});

以上配置导致需要往上一级找目录，因此以项目根目录为文件根目录，其实vite默认就是项目根目录，最终配置如下：

javascript 复制代码

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig(({ mode }) => {
  return {
    esbuild: {
      drop: mode === 'production' ? ['console', 'debugger'] : [],
    },
    build: {
      outDir: './dist',
      emptyOutDir: true,
      rollupOptions: {
        input: resolve(__dirname, 'src/index.html'),
      },
    },
  };
});

遇到的问题

已经添加环境变量文件.env.dev，但是在运行命令时，没法取到环境变量文件内的内容，运行命令如下： "build:dev": "vite build --mode development" Vite默认支持.env.development环境变量文件，不支持dev后缀的环境变量文件，需改成development
有两个js文件，script1.js、script2.js，在script1.js中引入script2.js的全局变量window.fun，引入方式为在index.html中引入，此时在script1.js中无法引入script2.js的全局变量window.fun

xml 复制代码

<script type="module" src="./script1.js"></script>
<script type="module" src="./script2.js"></script>

原因：在Vite打包时把script1和script2分模块打包，各个模块中的变量都是局部变量，无法互通。解决方案1：去掉分模块打包

xml 复制代码

<script src="./script1.js"></script>
<script type="module" src="./script2.js"></script>

解决方案2：使用ESmodule方法，export导出script2的fun变量，使用import导入到script1内

kotlin 复制代码

// script1.js
import fun from 'script2.js'

kotlin 复制代码

// script2.js
const fun=**
export default fun;