Vite的模块化打包与运行：迈向代码的优雅与高效

2023-11-08 13:55:10

开启Vite多页面之旅

在开始之前，确保您已安装Vite。若未安装，可通过终端输入 npm install -g vite 来安装。

多页面工程搭建

项目初始化

mkdir vite-multi-page-project
cd vite-multi-page-project
npm init -y

安装Vite
```
npm install --save-dev vite
```

创建Vite配置文件

在项目根目录下创建 vite.config.js 文件，并添加以下内容：

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: './src/main.js',
        page1: './src/page1.js',
        page2: './src/page2.js',
      },
      output: {
        dir: './dist',
        format: 'iife',
        entryFileNames: '[name].[hash].js',
        chunkFileNames: '[name].[hash].js',
        assetFileNames: '[name].[hash].[ext]'
      }
    }
  }
};

创建src目录和入口文件

在项目根目录下创建 src 目录，并在其中创建 main.js、page1.js、page2.js 三个入口文件。

模块化打包

在Vite配置文件中配置模块化打包选项

module.exports = {
  build: {
    rollupOptions: {
      output: {
        format: 'esm', // 将输出格式设置为 ESM
      }
    }
  }
};

在入口文件中导入模块

// main.js
import { greet } from './page1.js';
import { sayHello } from './page2.js';

greet();
sayHello();

运行Vite构建项目
```
npm run build
```
查看打包结果

在 dist 目录下，您将看到 main.js、page1.js 和 page2.js 三个打包后的文件。

模块化运行

在Vite配置文件中配置模块化运行选项

module.exports = {
  build: {
    rollupOptions: {
      output: {
        format: 'esm', // 将输出格式设置为 ESM
      }
    }
  },
  server: {
    middlewareMode: 'ssr' // 将服务端渲染模式设置为 SSR
  }
};

运行Vite构建项目
```
npm run build
```
运行Vite服务端
```
npm run serve
```
访问您的应用

在浏览器中访问 http://localhost:3000，您将看到您的应用正在运行。

集成Eslint、Prettier和Stylelint

安装Eslint、Prettier和Stylelint

npm install --save-dev eslint prettier stylelint

创建配置文件

在项目根目录下创建 .eslintrc.js、.prettierrc.js 和 .stylelintrc.js 三个配置文件，并分别添加以下内容：

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  rules: {
    // 具体规则配置
  }
};

// .prettierrc.js
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false
};

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    // 具体规则配置
  }
};

集成到Vite

在 vite.config.js 文件中添加以下内容：

module.exports = {
  build: {
    // ...
  },
  server: {
    // ...
  },
  plugins: [
    {
      name: 'eslint',
      enforce: 'pre',
      options: {
        cache: false
      }
    },
    {
      name: 'stylelint',
      enforce: 'pre',
      options: {
        cache: false
      }
    }
  ]
};