vite 和 vue-cli（一）、什么是vite vite 法语快速的，是一种新型前端构建工具，能够显著提升前端开

（一）、什么是vite

vite 法语快速的，是一种新型前端构建工具，能够显著提升前端开发体验

（二）、vite由两部分组成

1、一个开发服务，服务于开发环境，ESM + HMR

2、一套构建指令，服务于生产环境，用rollup打包

（三）、Vite将模块区分未依赖和源码两类，提升开发服务启动时间

依赖：在开发时不会变动的纯JavaScript， Vite会使用esbuild预构建依赖源码：通常为jsx、css或者VueSFC，时常会被编辑，需要转换，基于路由拆分

（四）、Vite以原生ESM方式提供源码，让浏览器接管打包工作

（五）、直接用ESM构建开发项目

index.hmtl

<!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>ESM Browser</title>
  <script src="./main.js" type="module"></script>
</head>
<body>
  
</body>
</html>

main.js

import { filter} from './node_modules/lodash-es/lodash.js'
 
const persons = [{
  name: 'mahong',
  age: '20',
},{
  name: 'ww',
  age: '30',
}]

const filterPersons = filter(persons, person => person.age>20)
console.log('filterPersons,,,,,', filterPersons);
console.log('main.js');


// 在浏览器的network里 可以看到很多请求
// http://127.0.0.1:5500/index.html
// http://127.0.0.1:5500/main.js
// ws://127.0.0.1:5500/index.html/ws
// http://127.0.0.1:5500/node_modules/lodash-es/lodash.js
// http://127.0.0.1:5500/node_modules/lodash-es/add.js
// http://127.0.0.1:5500/node_modules/lodash-es/after.js
// ......
// 我们只用到lodash-es里的filter 却加载了这么多lodash的模块 不合理

// lodash.js 中
// export { default as add } from './add.js'; 的意思是 import './add.js 在export出去

(六)、用vite构建开发项目

npm init @vitejs/app
// 然后按后面的提示往下走即可

index.html和上个项目一样 main.js

import { filter} from 'lodash-es'
 
const persons = [{
  name: 'mahong',
  age: '20',
},{
  name: 'ww',
  age: '30',
}]

const filterPersons = filter(persons, person => person.age>20)
console.log('filterPersons,,,,,', filterPersons);
console.log('main.js');
// 在浏览器的network里 可以看到很多请求
<!-- http://10.20.128.87:3002/
http://10.20.128.87:3002/@vite/client
http://10.20.128.87:3002/main.js 里
import { filter} from '/node_modules/.vite/lodash-es.js?v=927486ce' 模块被vite处理过
http://10.20.128.87:3002/node_modules/vite/dist/client/env.mjs
http://10.20.128.87:3002/node_modules/.vite/lodash-es.js?v=927486ce -->

(七)、打包

打包出dist文件夹包含index.html 入口文件和 assets文件夹下的静态资源文件（js、css、img等）

可以把这个dist文件夹放到服务器上部署启动服务器（nginx服务器或node或其他服务器）即可访问页面

（八）Vue CLI

基于webpack

npm install -g @vue/cli
// 旧版本 npm install -g vue-cli 若是安装了旧版本需要卸载 npm uninstall vue-cli -g
// 查看vuecli版本
vue --version
// 快速搭建项目
vue create hello-world

Vue CLI 有几个独立的部分——如果你看到了我们的源代码，你会发现这个仓库里同时管理了多个单独发布的包。

#CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

#CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

CLI 服务章节涵盖了它的具体用法。

#CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在插件和 preset 章节进行深入讨论。

名词解释

1、live server

如果直接把index.html文件在浏览器中打开会报错： Access to script at 'file:///E:/practice/vite/esm-browser/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. index.html:8 GET file:///E:/practice/vite/esm-browser/main.js net::ERR_FAILED

所以要在index.html根目录启动一个服务通过服务访问index.html文件可以用vscode的插件live server启动一个服务

或在index.html目录执行 http-server启动一个服务，根据服务提示的地址即可打开网页

2、ECMA

ECMA 是一家国际性会员制度的信息和电信标准组织

1994年之前，名为欧洲计算机制造商协会（european computer manufactures association）因为计算机的国际化，现在名称已经不属于首字母缩略字，而是国际性的

3、ESCMScript 和 Javascript

ESCMScript 和 Javascript的关系，前者是后者的规格，后者是前者的一种实现

1996年JavaScript的创造者netscapce公司决定将javascript提交给标准化组织ECMA，希望这种语言能够成为国际标准，

次年ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言成为ECMAScript

这个标准从一开始就是针对javascript语言指定的，之所以不叫javascript一方面是因为版权问题，另一方面是想体现这门语言的制定者是ECMA，这样有利于保证这门语言的开放性和中立性

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，

而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。ES6有时也是泛指“下一代 JavaScript 语言”。

可以将 ES6 代码转为 ES5 代码（如用babel），从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持

4、ESM

ESM （ECMA Sceipt modules）es6的modules

JavaScript 现在有两种模块。一种是ES6模块，简称ESM；另一种是Commonjs模块，简称CJS ES6模块使用import和export

浏览器加载ES6模块，可以使用script标签，但是要加入type=“module”属性例如异步加载

commonjs模块使用require和module.exports commonjs模块是nodejs专用的 nodejs v13.2版本开始默认打开了ES6模块的支持

blog.csdn.net/m0_56026872…