前端工程化、模块化方案教程大全，现代前端高手进阶必经之路（欢迎收藏）

关注掘金和github好久了，可是一直没有在上面发表什么文章，此次静下心来写了个前端的目前工程化与模块化方案的总结，后期会继续更新，为开源社区作出更大贡献。

前端的模块化方案从早年的require.js到 seaJs,commonJs,再到利用webpack打包的ES6模块化方案，换汤不换药，我的认为seaJs若是能玩得很6，那么后面的模块化方案都是洒洒水，更印证了那句话：底层的知识尤为重要，什么框架什么API，再换他终究是底层的javaScript写出来的，固然还有现在很火的typeScript，可是最终仍是依靠javaScript实现。在学习模块化方案时，必须安装Node.js,还有npm,这两个网上有教程，比较简单安装过程，这里不作详细的讲解。

使用npm第一件事， 运行npm init 生成对应的json文件

若是是使用别人的json文件，进入第一件事是 打开json文件查看，再npm install 便可

fis3
首先咱们说一说fis3，依靠Node.js的npm下载，咱们通常用来建立一个小型本地服务器，可让代码在手机上跑起来，否则每次总不能都打包成APP再安装测试吧，这样也效率不高，并且放在服务器上你们均可以一块儿测试一下。 fis3是命令行工具 打开系统的命令行工具输入下面的代码便可

注意，必定要按顺序运行

fis3 server open 打开服务器的那个目录 fis3 server start 启动服务器 经过ipconfig查看ip 手机链接电脑同一个局域网打开地址 fis3 server stop 中止服务器运行 手机端打开浏览器后输入地址，默认会找到服务器目录中的index.html文件运行

---

CMD模块化方案

CMD的模块化方案依靠seaJs来实现，AMD即require.js来实现，可是AMD已经彻底落伍，这里不作介绍。 seaJs可使用CDN，也能够下载JS文件引入

seaJs核心：

1.aJs遵循，一个define函数函数，为一个模块，define函数{}内部引用其余模块所须要填写路径时，参考define函数所在的JS文件填写，这句话尤其重要，必定要看清楚！

2.seajs的模块化定义

define(function(require,exports,module){} 这里函数参数不建议修改

3.模块的引入 在所须要引入模块的define函数{}内 require('url')，若是被引入的模块有暴露接口（接口多是一个对象，函数，变量）， 那么能够直接var app=require('url'), 若是那边暴露的是一个变量，这边就能够直接用app代替，若是是一个对象，那么能够用 app.**的形式使用，若是是一个函数，那么能够app()方式直接调用，是否是有点像最开始的命名空间？ 4.模块的接口暴露

两种方案：

modelu.exports =>{}<= exports

上面这段代码，意思是什么呢？相信不少人只会用，不知道原理 ，

exports:首先对于自己来说是一个变量（对象），它不是module的引用，它是{}的引用，它指向module.exports的{}模块 module.exports:首先，module是一个变量，指向一块内存，exports是module中的一个属性，存储在内存中，而后exports属性指向{}模块，若是要粗糙点理解，能够理解成在一个JS文件中，他们同时指向了一个空的对象，若是都是用 exports.a=app , module.exports.b = app的形式去暴露app,那么他们的效果都是同样的，都是给这个空对象添加了属性而已，不过若是exports若是不适用.的形式暴露就是无效的。

5.模块化合并

在index.html的文件中,script标签， seajs.use('url'),此时参考自身html文件所在位置填写url路径,通常这个入口文件咱们填写成 index.js，在index.js文件中咱们把全部的js文件中的代码复制过来。

这样一个index.js文件中就有了多个difine函数， 在顶部的difine函数中这样填写difine(相对于index.html的url,[须要注册的JS文件相对于index.js的url，须要注册的JS文件相对于index.js的url....],function (require, exports, module) {}，这里为何须要注册，意思是告诉seajs，咱们 须要使用这些模块，在下面都定义好了。

下面是一个实际的 案例

index.html中 seajs.use('./js/index.js')

在index.js中

define("../js/index.js", ["./css.js", "./demo.js", "./nav.js", "./tap.js"], function (require, exports, module) {}

define("../js/css.js", function (require, exports, module) {}

define("../js/nav.js", function (require, exports, module) {}

define("../js/demo.js", function (require, exports, module) {}

define("../js/tap.js", function (require, exports, module) {}

这里暴露接口的方式须要屡次尝试，使用变量去接住require的模块暴露的值的时候，命令方式也要考虑。

seajs的东西搞懂，那么commonjs和ES6模块化方案，就比较简单了。

---

commonjs模块化方案 依靠 broserify完成，broserify也是一个命令行工具，经过npm下载 你们有兴趣能够去broserify上的官网去看看

commonJS

broserify 经过npm下载，命令行工具

broserify xx.js -o xx.js 这样就完成了编译

默认一个模块一个JS文件，暴露接口只能用module.export暴露

引入也是require的方式，经过broserify编译后产生的新文件，直接在html中引入便可，这样模块化就完成了。

---

ES6模块化方案 依赖 webpack@3.10.0版本完成

经过npm下载

npm i @webpack 3.10.0 --save-dev

暴露接口使用export default {}方式， {}里面能够一次暴露多个内容，好比 export.default {a,b,c} ， 这样就把a,b,c三个变量都暴露出去了

引入使用经过import ** from 'url'的方式引入

好比 import jerry from './js/app.js', 那么jerry.a 就是暴露的那个a变量。

为何只教这一种方案 由于这种方案使用最多

---

git

经过官网下载exe的应用程序，而后在项目内部的文件夹右键空白处启动

有linux和git命令

开启git第一件事git init-y

echo 字符串 > 文件 ， 为文件写入内容，会覆盖操做，没有这个文件则新建

vim 文件 , vim编辑器，编辑文件后须要再次添加到暂存区 （VIM编辑器）

cat 文件url ，查看文件的内容

find .git/objects -type -f 查看当前的版本库 内容

git rm 文件名， 能够删除版本库里面的文件

git ls-files -s 查看当前暂存区的内容

git cat-files -p / -t 查看对象的索引 ，能够查看对象的内容或者文件类型

git add ./ 或者 git add 文件url 把当前全部未跟踪文件或指定文件添加到暂存区 并跟踪

git commit -a -m'' 将当前已追踪的文件直接提交

git commit -m 提交当前暂存区的全部文件

git reset --soft HEAD~ == 把指针指向上次的提交对象

git reset --mixed HEAD~ 把指针指向上次的提交对象 , 暂存区也重置成上次的提交对象所对应的样子 mixed不写也能够 默认的

git reset -- hard HEAD~ 把指针指向上次的提交对象，暂存区和工做区域也重置上次的提交对象所对应的样子，这是git里惟一的危险操做， 若是没有及时add工做区的内容，那么使用此条命令便会直接覆盖，存在文件丢失的风险。

上面的HEAD抽象指向最后一次的提交对象，后面加~则是指向上一次的提交对象。

git checkout 分支名， 跳到分支上。

git checkout -b 分支名 新建分支名 而且跳到分支上

git checkout commit +文件名 ， 跳过HEAD的移动这一步，进行暂存区的覆盖和工做目录的覆盖。

git branch 查看当前全部分支

git branch -vv 查看当前全部跟踪分支

git branch -b 远程跟踪分支名，让当前本地分支变成对应的远程跟踪分支的跟踪分支，可使用git pull来自动匹配文件和合并分支

git fetch 当前跟踪分支名 获取库的最新数据，可是不会自动合并分支，须要手动修改

git branch -u 远程跟踪分支名， 将目前所在分支显示的制定成对应的远程跟踪分支的跟踪分支，可使用pull命令

git pull ，在跟踪分支上使用，直接获取最新的远程跟踪分支的引用，而且移动至最新的位置，自动合并分支。

git push +想要推送的那个分支名 + 推送对应的远程跟踪分支

git clone url 首次获取远程数据库的数据，而后自动创立远程跟踪分支和本地分支（这个本地分支也是对应的远程跟踪分支的跟踪分支。

项目经理的操做流程：

git remote add name url 建立库

git push name master 推送数据到库 而后成员即可如下载

若是项目本身须要下载最新数据，建议将目前本地的master分支使用git branch -u name/master 命令显示制定为对应的跟踪分支

一个跟踪分支只能对应一个远程跟踪分支，可是一个远程跟踪分支能够对应多个跟踪分支。

---

babel 编译ES6的代码，让其在不支持ES6的浏览器上运行

经过npm下载 @babel/core @babel/cli两个基本的文件

而后是插件 经过npm 下载 在.babelrc文件在{}里面定义plugins 便可使用。

若是是套餐，只须要在.babelrc文件中注明，在npm中下载，便可使用

若是是require（）模块，commonJS的模块化方案，可使用broserify或者webpack进行打包

还能够结合eslint 进行限制git的文件上传 pre-commit 配置

---

后期会继续更新ES6/7，typeScript，以及原生javaScirtp，H5,C3的更多重要知识点，感谢掘金这个平台！