【element】学习ElementUI开篇......

Element-UI源码阅读之md显示到页面

Element-UI 技术揭开背后的秘密

参考ElementUI的文档实现方案，实现自己组件库的说明文档

Element-UI 中 Make 自动化构建分析

makefile到底是干什么用的？

• 一个工程（project）中的源文件不计其数，其按类型、功能、模块分别放在若干个目录中，makefile定义了一系列的规则来指定，哪些文件需要先编译，哪些文件需要后编译，哪些文件需要重新编译，甚至于进行更复杂的功能操作，因为 makefile就像一个Shell脚本一样，其中也可以执行操作系统的命令。
• Makefile 文件描述了整个工程的编译、连接等规则。其中包括：工程中的哪些源文件需要编译以及如何编译、需要创建那些库文件以及如何创建这些库文件、如何最后产生我们想要的可执行文件。尽管看起来可能是很复杂的事情，但是为工程编写Makefile 的好处是能够使用一行命令来完成“自动化编译”，一旦提供一个（通常对于一个工程来说会是多个）正确的Makefile，编译整个工程你所要做的唯一的一件事就是在shell 提示符下输入make命令。整个工程完全自动编译，极大提高了效率。

转：element源码解析--打包构建

本篇文章主要对 element 框架的 build 目录 及 package.json 中的 scripts 脚本，也就是element项目的脚本构建打包进行解析。

废话不多说，先来张图：

对于node项目，除了对整体结构的浏览，第一步要做的事，就是查看项目的核心文件，package.json。由于本篇主讲scripts，需要了解其他字段的，可在官方文档查看

package.json 官方资料

从上图可以看出，scripts 下很多内容，我们需要关心的主要有两个，一个dist（项目构建，生成打包文件，类似vue-cli 的 npm run build），一个dev（同 vue-cli 的 npm run dev ）

先看dist

"dist": "npm run clean && 
         npm run build:file && 
         npm run lint && 
         webpack --config build/webpack.conf.js &&
         webpack --config build/webpack.common.js && 
         webpack --config build/webpack.component.js &&
         npm run build:utils && 
         npm run build:umd && 
         npm run build:theme"

把需要执行的命令拆开来看：

1. npm run clean ：执行脚本中的 clean 命令，删除之前打包的文件

"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"

2. npm run build:file ：执行脚本中的build:file命令，依次是生成 examples/icon.json；生成 src/index.js；生成 examples/pages下国际化相关vue文件；生成 examples/versions.json；

/**
a.  生成 examples/icon.json
b.  生成 src/index.js
c.  生成 examples/pages下国际化相关vue文件
d.  生成 examples/versions.json
*/
"build:file": "
    node build/bin/iconInit.js &     
    node build/bin/build-entry.js &   
    node build/bin/i18n.js &    
    node build/bin/version.js"  

3. npm run lint ：执行脚本中的lint命令，eslint检查

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

4. webpack --config build/webpack.conf.js ：webpack打包，lib目录下打包 index.js文件 （浏览器使用的js包）.
5. webpack --config build/webpack.common.js ：webpack打包，lib目录下生成element-ui.common.js 文件（node下使用的文件，对应 package.json 中的 main 字段）
6. webpack --config build/webpack.component.js ：webpack打包，lib下生成组件的 js 文件
7. npm run build:utils ：执行 build:utils 命令 ，babel 打包src目录下文件至lib，忽略index.js

"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib 
    --ignore src/index.js"

8. npm run build:umd ：执行 build:umd 命令 ，lib/locale下生成国际化相关文件

"build:umd": "node build/bin/build-locale.js"

9. npm run build:theme：执行 build:theme 命令 ，生成样式

"build:theme": "node build/bin/gen-cssfile && 
    gulp build --gulpfile packages/theme-chalk/gulpfile.js && 
    cp-cli packages/theme-chalk/lib lib/theme-chalk"

再看dev

    "dev": "npm run bootstrap && 
            npm run build:file &&
            cross-env NODE_ENV=development webpack-dev-server 
                          --config build/webpack.demo.js & 
            node build/bin/template.js "

还是拆开看：

1. 安装包；
2. 生成index.js
3. webpack 启动
4. tpl后缀模板文件的处理