【nlp】1.3 文本数据分析（标签数量分布、句子长度分布、词频统计与关键词词云）-CFANZ编程社区

文章目录

1 构建工具
2 vite启动项目初体验
3 vite 原理篇
- 3.1 vite是怎么让浏览器可以识别.vue文件呢
- 3.2 使用path.resolve的原因
4 vite与css
5 vite相关知识

1 构建工具

1.1 什么是构建工具

企业级项目里都可能具备哪些功能？

typescript：使用tsc工具将ts代码转换为js代码；
React/Vue：安装react-compiler/vue-compiler，将我们写的jsx文件或者.vue文件转换为render函数；
less/sass/postcss/component-style：我们有需要安装less-loader,sass-loader等一系列编译工具转换为css代码；
语法降级：babel可以将es的新语法转换旧版浏览器可以接受的语法；
体积优化：uglifyjs可以将我们的代码进行压缩变成体积更小性能更高的文件。

构建工具承担了以下脏活累活：

模块化开发支持：支持直接从node_modules里引入代码 + 多种模块化支持
处理代码兼容性：比如babel语法降级，less，ts语法转换（不是构建工具做的，构建工具将这些语法对应的处理工具集成进来自动化处理）
提高项目性能：压缩文件，代码分割
优化开发体验：
- 构建工具会帮你自动监听文件的变化，当文件变化以后自动帮你调用对应的集成工具进行重新打包，然后再浏览器重新运行（整个过程叫做热更新，hot replacement）
- 开发服务器：跨域的问题，用react-cli create-react-element vue-cli解决跨域的问题

1.2 主流构建工具

webpack
vite
parcel
esbuild
rollup
grunt
gulp

1.3 vite相较于webpack的优势

起因：我们的项目越大，构建工具（webpack）所要处理的js代码就越多【跟webpack的一个构建过程（工作流程有关）】

造成的结果：构建工具需要很长时间才能启动开发服务器（把项目跑起来）

yarn start
yarn dev

npm run dev
npm run start

2 vite启动项目初体验

2.1 你必须要理解的vite脚手架和vite

比如我们敲了yarn create vite

帮我们全局安装了一个东西：create-vite（vite的脚手架）
直接运行这个create-vite bin目录下的一个执行配置

误区：认为官网中使用对应的yarn create构建项目的过程也是vite在做的事情

先学习的就是vite，暂时不会使用yarn create vite my-vue-app --template vue。vue-cli可以和webpack分的很清楚。

2.2 vite开箱即用

在默认情况下，我们的esmodule去导入资源的时候，要么是绝对路径，要么是相对路径，既然我们现在的最佳实践是node_modules，那么为什么es官方在我们导入非绝对路径和非相对路径的资源的时候不默认帮我们搜寻node_modules？

2.3 vite的预加载

import _ from "lodash"; // lodash可能也import了其他的东西

import _vite_cjsImport0_lodash from "/node_modules/.vite/deps/loadsh.js?v=ebe57916";

在处理的过程中如果说看到了有非绝对路径或者相对路径的引用，则会尝试开启路径补全

找寻依赖的过程是自当前目录依次向上查找的过程，直到搜寻到根目录或者搜寻到对应依赖为止 /user/node_modules/lodash, ../

所以它解决了3个问题：

不同的第三方包会有不同的导出格式（这个是vite没法约束人家的事情）
对路径的处理上可以直接使用.vite/deps，方便路径重写
叫做网络多包传输的性能问题（也是原生esmodule规范不敢支持node_modules的原因之一），有了依赖预构建以后无论它有多少的额外的export和import，vite都会尽可能的将他们集成最后只生成一个或者几个模块

vite.config.js === webpack.config.js

2.4 vite配置文件处理细节

vite配置文件的语法提示
1. 如果你使用的是webstorm，那你可以得到很好的语法补全
2. 如果你使用的是vscode或者其他编辑器，则需要做一些特殊处理
关于环境的处理

2.5 vue环境变量配置

我们在和后端同学对接的时候，前端在开发环境中请求的后端API地址和生产环境请求的后端API地址是一个吗？肯定不是一个

开发和测试：http://test.api/
生产：https://api/

如果是客户端，vite会将对应的环境变量注入到import.meta.env里去

vite做了一个拦截，为了防止我们将隐私性的变量直接送到import.meta.env中，所以做了一层拦截，如果你的环境变量不是以VITE开头的，他就不会帮你注入到客户端中去，如果我们想要更改这个前缀，可以去使用envPrefix配置。

3 vite 原理篇

3.1 vite是怎么让浏览器可以识别.vue文件呢

Vite 是一个现代化的前端构建工具，它使用了一种名为单文件组件（Single File Components）的技术来让浏览器能够识别和加载 .vue 文件。

在传统的前端开发中，浏览器无法直接识别和加载 .vue 文件，因为 .vue 文件包含了 HTML、CSS 和 JavaScript 代码，而浏览器只能识别和执行 JavaScript 文件。

Vite 利用了构建工具和打包器的能力，在开发阶段将 .vue 文件转换为浏览器可以识别的形式。它借助特定的编译器（如 Vue 编译器）将 .vue 文件的模板、样式和脚本部分分别提取出来，并将它们转换为浏览器可以理解的代码。

具体地说，Vite 使用了名为 “vue-loader” 的工具来解析和转换 .vue 文件。这个工具会解析 .vue 文件的内容，提取出其中的模板、样式和脚本，并将它们转化为独立的代码块。然后，Vite 使用浏览器原生的 ES 模块导入机制，通过 <script type="module"> 标签将这些代码块加载到浏览器中。

当浏览器遇到 <script type="module"> 标签时，它会将标签中的 JavaScript 代码作为一个独立的模块加载和执行。Vite 利用这个特性，将 .vue 文件中的模板、样式和脚本部分分别作为独立的模块加载到浏览器中，并在浏览器中动态组合它们，构建出最终的组件。

3.2 使用path.resolve的原因

4 vite与css

4.1 在vite中处理css

vite在读取到main.js文件中引用到了index.css
直接使用fs模块去读取index.css中文件内容
直接创建一个style标签，将index.css中文件内容直接copy到style标签里
将style标签插入到index.html的head中
将css文件中的内容直接替换为js脚本（方便热更新或者css模块化），同时设置Content-Type为js，从而让浏览器以JS脚本的形式来执行该css后缀的文件

cssmodule就是来解决这个问题的：

module.css（module是一种约定，表示需要开启css模块化）
他会将你的所有类名进行一定规则的替换（将footer替换为_footer_i22st_1）
同时创建一个映射对象{ footer: "_footer_i22st_1"}
将替换过后的内容塞进style标签里然后放入到head标签中（能够读到index.html的文件内容）
将componentA.module.css内容全部抹除，替换为JS脚本
将创建的映射对象在脚本中默认导出

4.2 css文件类型

/* SCSS */
.container {
  width: 100%;

  .header {
    background-color: #333;
    color: #fff;
    padding: 10px;
  }

  .content {
    padding: 20px;

    p {
      margin-bottom: 10px;
    }

    a {
      color: #f00;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
  }
}

在这个示例中，.container 是最外层的容器选择器，它包含了 .header、.content 和 .footer 子选择器。通过嵌套定义，我们可以更直观地表示这些选择器之间的层次结构。

此外，嵌套定义还可以减少重复代码的编写。在上述示例中，.header 和 .footer 具有相同的背景颜色、文字颜色和内边距，通过嵌套定义，我们只需在父选择器中指定一次即可，避免了重复的样式声明。

另外，嵌套定义还可以方便地应用伪类和伪元素样式。在示例中，嵌套定义了 a 元素的样式，并使用 &:hover 表示其悬停状态下的样式，这样可以更直观地表示选择器之间的关系。

通过使用嵌套定义，我们可以更清晰地组织和维护样式代码，减少了冗余和重复的工作，提高了代码的可读性和可维护性。

4.3 vite.config.js中css配置

4.3.1 module篇

css: { 
    
    modules: { 
    }
}
css: { // 对css的行为进行配置
  // modules配置最终会丢给postcss modules
  modules: { // 是对css模块化的默认行为进行覆盖
    localsConvention: 'camelCase', // 修改生成的配置对象的 key 的展示形式为驼峰命名
    scopeBehaviour: 'global', // 配置当前的模块化行为为全局化
    generateScopedName: '[name]__[local]___[hash:base64:5]', // 指定生成的类名的命名规则
    hashPrefix: 'my-app', // 生成的 hash 的前缀
    globalModulePaths: ['path/to/global/styles'] // 不参与 CSS 模块化的路径
  }
}

localsConvention：修改生成的配置对象的key的展示形式（驼峰还是中划线形式）
scopeBehaviour：配置当前的模块化行为是模块化还是全局化（有hash就是开启了模块化的一个标志，因为它可以保证产生不同的hash值来控制我们的样式类名不被覆盖）
generateScopedName：[name_[local]_[hash:5]]，指定生成的类名的命名规则（可以配置为函数，也可以配置成字符串规则）
hashPrefix：生成的hash会根据你的类名进行生成，如果想要你生成的hash更加的独特一点，你可以配置hashPrefix，你配置的这个字符串会参与到最终的hash生成
globalModulePaths：代表你不想参与到css模块化的路径

4.3.2 preprocessorOption篇

css: {
  preprocessorOptions: {
    // 配置 CSS 预处理器的全局参数
  }
}

在 preprocessorOptions 中，你可以配置 CSS 预处理器的一些全局参数，具体参数的配置取决于你使用的预处理器（如 Sass、Less 等）。这里可以配置一些通用的选项，比如：

additionalData：额外的全局样式数据，可以在每个 CSS 文件的顶部注入，例如共享的变量、混合器等。
sass：用于配置 Sass 预处理器的选项，如 sass 选项中的 indentedSyntax 表示是否使用缩进语法。
less：用于配置 Less 预处理器的选项，如 less 选项中的 javascriptEnabled 表示是否启用 Less 中的 JavaScript 表达式。

4.3.2 postcss篇

import autoprefixer from 'autoprefixer';

export default {
  // ...
  css: {
    postcss: {
      plugins: [
        autoprefixer(), // 配置 PostCSS 插件，例如 Autoprefixer
        // 其他的 PostCSS 插件...
      ]
    }
  }
}

在 postcss 配置项中，你可以指定要使用的 PostCSS 插件。在示例中，我们使用了一个常见的插件 Autoprefixer，它用于自动添加 CSS 浏览器前缀，以提供跨浏览器兼容性。

你可以根据需要，将其他的 PostCSS 插件添加到 plugins 数组中。这些插件可以用于执行各种 CSS 处理任务，例如压缩、优化、转换等。

需要注意的是，为了使用特定的 PostCSS 插件，你需要在项目中安装这些插件的相应依赖，并在 vite.config.js 文件中进行正确的导入和配置。

此外，你还可以在 postcss 配置项中设置其他选项，例如 config、sourceMap 等，以满足特定的需求。具体的配置选项和语法规则可以参考 PostCSS 插件的文档或相关资源。

5 vite相关知识

5.1 vite加载静态资源

vite对静态资源基本上是开箱即用的，除了一些特殊情况（svg）

要加载静态资源，你可以将它们放置在你的项目目录中的任何位置。通常，你可以将这些静态资源放置在你的项目根目录下的 public 文件夹中，这是一个预定义的静态资源文件夹。当你在代码中引用这些静态资源时，Vite 会自动将它们提供给你的应用程序。

例如，如果在你的项目中有一个名为 public 的文件夹，并且在其中有一个图片文件 logo.png，你可以在代码中像下面这样引用它：

<img src="/logo.png" alt="Logo" />

Vite 会自动将此路径解析为相应的静态资源，并将其提供给你的应用程序。

需要注意的是，在 Vite 中，你可以使用相对于根目录的绝对路径来引用静态资源，而无需考虑模块化的路径解析。这是因为 Vite 使用自己的开发服务器，能够在运行时动态处理这些静态资源的请求。

对于某些特殊的静态资源，如 SVG 文件，你可能需要额外的配置来确保正确加载。对于 SVG 文件，你可以使用 @vitejs/plugin-svg 插件来处理。你可以按照 Vite 官方文档中的说明，添加该插件并进行相应的配置。

5.2 vite在生产环境中对静态资源的处理

5.3 vite常用插件

5.3.1 vite-aliases

vite-aliases的可选配置项如下：

ViteAliases({
  /**
  * Relative path to the project directory
  */
  dir: 'src',

  /**
  * Prefix symbol for the aliases
  */
  prefix: '~',

  /**
  * Allow searching for subdirectories
  */
  deep: true,

  /**
  * Search depthlevel for subdirectories
  */
  depth: 1,

  /**
  * Creates a Logfile
  * use `logPath` to change the location
  */
  createLog: false,

  /**
  * Path for Logfile
  */
  logPath: 'src/logs',

  /**
  * Create global project directory alias
  */
  createGlobalAlias: true,

  /**
  * Turns duplicates into camelCased path aliases
  */
  adjustDuplicates: false,

  /**
  * Used paths in JS/TS configs will now be relative to baseUrl
  */
  useAbsolute: false,

  /**
  * Adds seperate index paths
  * approach created by @davidohlin
  */
  useIndexes: false,

  /**
  * Generates paths in IDE config file
  * works with JS or TS
  */
  useConfig: true,

  /**
  * Override config paths
  */
  ovrConfig: false,

  /**
  * Will generate Paths in tsconfig
  * used in combination with `useConfig`
  * Typescript will be auto detected
  */
  dts: false,

  /**
  * Disables any terminal output
  */
  silent: true,

  /**
  * Root path of Vite project
  */
  root: process.cwd()
});