element plus 开发工具 elementui开发文档

答：是通过模板自动生成的

 

我们从构建指令入手，一步步分析element-ui官方文档的构建过程

1，构建指令

"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",

很显然这个指令分三部分，

npm run build:file

cross-env NODE_ENV=production webpack --config build/webpack.demo.js

echo element.eleme.io>>examples/element-ui/CNAME （这个没啥好说的，只是每次构建向CNAME中写入一句话而已）

首先看 build:file具体内容

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",

这里分别执行了四个脚本文件,查看他们的内容，显然是通过node内置的fs指令通过模板文件自动生成另外一些代码，看看他们生成了什么代码：

iconInit.js,  这个生成了 /examples/icon.json文件，里面是项目中使用到的图标，这个icon.json的具体用法傻鱼没有进一步跟踪，也不是我们关注的重点

build-entry.js, 这个文件生成了elementUI源码的入口文件，没错入口文件是自动生成的！！！ /src/index.js文件 ！！！，仔细想想这样做的好处，当我们项目越来越庞大的时候，我们希望文件之间尽量减少耦合，比如这里使用模板，我们开发了一个新组建后，不需要人为的去修改入口文件来export我们自己的新组件，这样是不是减少了发生错误的概率。

i18n.js, elementUI的文档有四个语言版本，看看这个脚本文件生成了那些代码

 

 它竟然根据一个模板，生成了四个语言版本的vue文件！！！（傻鱼一开始以为是在一个vue文件中通过i18n插件进行语言切换而已，现在看来显然是想错了。。。）

 

 惊呆了，干嘛不直接使用i18n切换。。。。。。。

version.js，这个生成了一个verson.json文件，里面存了历史版本号。。。没啥好说的

 

接下来我们看

cross-env NODE_ENV=production webpack --config build/webpack.demo.js
环境变量为 production，
查看webpack.demo.js的关键代码

 

 

这个文件中入口，出口，启动端口等都写得很清楚，我们这时回头看看examples下的文件，不正是我们熟悉的前端工程吗。

以前我们把dist文件夹放到Nginx上，现在我们把element-ui 文件夹放到Nginx上
以前入口文件是main文件，现在是entry文件