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

关注掘金和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的更多重要知识点，感谢掘金这个平台！