Vue

Vite库模式开发

2022-03-28  本文已影响0人  前端C罗

本文记录一次使用vite + typescript + react开发UI组件并打包的过程，帮助自己及读者理顺基本的vite对于 本地开发/打包配置/发布注意项 相关的知识。示例代码可在本人的github上查看。

Node环境

读者可以确认自己的本地node环境，node版本不同在后续的讲解中，会导致一些特性的支持性稍微不一致。

创建vite项目

创建react项目，使用ts开发，所以选择react-ts模板

// npm版本不同命令会有所区别，具体查看官网
npm create vite@latest react-ts-app --template react-ts

vite支持的模板比较多，可以根据自己的情况实际去选择，具体的模板列表可以点击查看。

初始的项目文件目录及列表如下图所示


vite初始化项目结构

安装依赖并运行

命令行cd到项目根目录，运行yarn安装依赖

yarn

依赖安装完毕后，打开node包描述文件package.json。

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }

可以看到scripts下默认有3个命令

当前处于开发阶段，直接使用开发环境预览命令，在本地网页上查看效果。

yarn dev

很棒！一个react大logo显示在本地启动的页面上。👏👏👏。至此，vite创建的react-ts项目完成。

配置库模式

vite支持库模式，也就是所谓的打包为一个库供其他开发人员引入使用。这里可以参考vite库模式的官方文档操作，点击这里。
先看看官方给出的js配置示例

// vite.config.js
const path = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

这个示例是基于vue开发框架进行配置的，没关系，开发者根据实际情况做一些简单的配置修改即可。回到本文的案例，基于react开发/使用typescript语言，初始化的配置文件内容如下

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

根据库模式的配置说明，进行修改后的配置文件如下：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    }
  },
  build: {
    lib: {
      // 打包的入口文件
      entry: path.resolve(__dirname, 'src/App.tsx'),
      name: 'App',
      fileName: (format) => `flow-builder.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
    }
  },
})

配置修改点如下：

相应的配置项说明，不再做详细说明，相关的知识可以在vite官网的文档中找到更为详尽的描述。这里需要稍微提一下的就是，默认会生成es和umd两个格式的js文件。

本地开发调试

既然是开发库，那么在发布出去给其他开发者使用之前，自己的体验和测试是避免不了的。vite库模式在本地开发调试的体验上相当丝滑。不需要另外启动一个测试项目，在本地项目即可完成二者的完美统一。

具体分为以下几步：

import React from "react";
import ReactDOM from "react-dom";
// 这里是重点！！！
// App为库的入口，模拟外部引入
import App from "../src/App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 这里是重点！！！ -->
    <!-- src的路径改为examples下的文件路径 -->
    <script type="module" src="/examples/index.tsx"></script>
  </body>
</html>

生成类型定义文件

经过上面配置之后，本地开发库并且体验库功能已经比较顺畅。但库开发完下一步就是打包发布，将库提供给更多的开发者使用。因为项目使用ts开发，因此在编译打包前，需要修改typescript.config.json中的编译选项

{
  "compilerOptions": {
      // 开启类型定义文件生成的开关
      "noEmit": false,
      "declaration": true,
      // 类型定义文件生成的目标目录
      "outDir": "types",
      // 只emit类型定义文件，而不emit其他诸如source-map等
      "emitDeclarationOnly": true,
  }
}

社区也有相关的vite插件，插件地址。实现原理是使用ts-morph生成相应的类型申明文件。感兴趣的读者可以自行尝试。
通过上述配置，打包时会在包目录下生成名为types的目录，同时库中ts/tsx中定义的类型会生成相应的xxx.d.ts。如下图所示：

配置修改后打包生成的文件列表
配置包发布文件列表和类型定义入口

先抛出包相关的配置项，如下

{
  "files": [
    "dist",
    "types"
  ],
  "main": "./dist/react-ts-app.umd.js",
  "typings": "types/App.d.ts",
}

经过上面一系列的配置之后，可以愉快地(😊)开始库开发与调试，相信把包推到市场就不需要cluo赘述了。

初步尝试，欢迎交流。

上一篇 下一篇

猜你喜欢

热点阅读