We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
自从前后端分离以来，“前端工程化”已经是前端领域的高频词汇。
随着 Node.js 的兴起，诞生了如 gulp、grunt、webpack 等一批自动化工具，大大提升了前端在自动化、工程化等方面的效率，并降低了成本。
大体的来说，前端工程化有两层含义：
广义的前端工程化
前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效开发，有效协同，质量可控。
狭义的前端工程化
前端工程是指将 开发阶段 的代码转变成 生产环境 的代码的 一系列步骤。
主要包括 构建 , 分支管理 , 自动化测试, 部署 等。
（ 定义摘自：https://segmentfault.com/a/1190000008358748 ）
自动化 是前端工程化的重要特征。我们通过开发一些工具，将重复性工作自动化，以提高开发、协作效率。
项目初始化，一般是初始化项目目录文件，对前端而言，一般是如下的目录结构：
pages/ index/ detail/ package.json .gitignore README.md
这个动作完全可以自动化，通过工具生成标准模板。
工具推荐：
init
前端使用的技术栈多种多样，如 vue/react/zepto 等，样式编辑有 less/sass/原生 css 等，js 有 es5/es6 等，而这种情况遇到的困难，就是如何配置各种工具才能产出浏览器可以识别的代码。
配置的过程是繁琐的，这个过程我们也需要 自动化。
run
前端和后端由于节奏不同，但前端有时又对接口依赖，怎么办呢？数据 Mock 就有用了。
前后端数据格式在约定好后，前端同学在开发阶段接入 mock 数据，等到接口准备好后，转为真实数据即可。
现在社区有很多工具可以 Mock 数据，推荐几个：
mock
在团队协作中，肯定会涉及通用模块的沉淀和使用问题，那么我们如何处理这些问题呢？
通常情况下，我们将各类模块通过 npm 托管分发。
团队协作，每个人的代码风格都不一样，除了个别开发者会自行配置代码检查，绝大部分同学很少有时间和动力为自己配置代码检查工具。
这时，团队协作就面临以下问题：
我们将代码检查工具化，极大简化成本。
有两种方式统一代码风格并检查漏洞：
两种方式都可以，看团队需求。
lint
现在大多数团队使用 git 进行代码管理。
在开发阶段使用开发分支，生产发布自动 merge master 合并主干。
merge master
本地开发阶段进行自动化测试
通过工具，将本地复杂的测试准备工作自动化，以便于在本地进行自动化测试。
线上部署阶段进行自动化测试
线上部署阶段，很容易进行自动化测试的中心化管理，如果有项目没有写测试用例，中心化平台可以做各种操作，如暂停部署等。
本地开发和线上部署两个阶段的自动化测试，需要有机结合起来，保证测试环境的一致性。
test
部署阶段，因为是中心化的，所以更容易进行各种检测操作，以保证线上稳定。
它需要：
对页面错误和性能的监控是必要的，随着团队规模的不同，监控系统接入的难度不同。
其中，效率最低、准确性最差的是手动添加监控代码。这种我们放弃。
自动添加监控代码包括：
监控代码部署后，就通过各种手段展现、通知责任人，查看优化前后效果对比等。
性能监控系统需要的功能
TODO...
上面在涉及前端工程化的各个环节，我们都推荐了一些工具，可以设想一下，如果每个环节都有一个新的工具要使用，开发起来将是多么痛苦。
所以，前端工程化的一个重要里程碑，是一个工具做完大部分事情。
上述功能，我们建议集成到一个工具里，避免开发者频繁地切换工具。
webpack 的变化非常快，目前我们的尝试版本是 3.10.0。
使用
分析
强大的 IDE 可以让开发过程如丝般顺滑。下面是对前端开发而言，比较优秀的 IDE：
更重要的是，这些 IDE 提供了插件机制，想要的功能通过插件大部分能够实现。
MIT
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前言
自从前后端分离以来，“前端工程化”已经是前端领域的高频词汇。
随着 Node.js 的兴起，诞生了如 gulp、grunt、webpack 等一批自动化工具，大大提升了前端在自动化、工程化等方面的效率，并降低了成本。
大体的来说，前端工程化有两层含义：
广义的前端工程化
前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效开发，有效协同，质量可控。
狭义的前端工程化
前端工程是指将 开发阶段 的代码转变成 生产环境 的代码的 一系列步骤。
主要包括 构建 , 分支管理 , 自动化测试, 部署 等。
（ 定义摘自：https://segmentfault.com/a/1190000008358748 ）
前端工程化的特点
前端工程化的体现
自动化 是前端工程化的重要特征。我们通过开发一些工具，将重复性工作自动化，以提高开发、协作效率。
项目初始化
项目初始化，一般是初始化项目目录文件，对前端而言，一般是如下的目录结构：
这个动作完全可以自动化，通过工具生成标准模板。
工具推荐：
init命令本地开发
前端使用的技术栈多种多样，如 vue/react/zepto 等，样式编辑有 less/sass/原生 css 等，js 有 es5/es6 等，而这种情况遇到的困难，就是如何配置各种工具才能产出浏览器可以识别的代码。
配置的过程是繁琐的，这个过程我们也需要 自动化。
工具推荐：
run命令数据 Mock
前端和后端由于节奏不同，但前端有时又对接口依赖，怎么办呢？数据 Mock 就有用了。
前后端数据格式在约定好后，前端同学在开发阶段接入 mock 数据，等到接口准备好后，转为真实数据即可。
现在社区有很多工具可以 Mock 数据，推荐几个：
mock命令模块管理
在团队协作中，肯定会涉及通用模块的沉淀和使用问题，那么我们如何处理这些问题呢？
通常情况下，我们将各类模块通过 npm 托管分发。
代码规范
团队协作，每个人的代码风格都不一样，除了个别开发者会自行配置代码检查，绝大部分同学很少有时间和动力为自己配置代码检查工具。
这时，团队协作就面临以下问题：
我们将代码检查工具化，极大简化成本。
有两种方式统一代码风格并检查漏洞：
两种方式都可以，看团队需求。
工具推荐：
lint命令分支管理
现在大多数团队使用 git 进行代码管理。
在开发阶段使用开发分支，生产发布自动
merge master合并主干。自动化测试
本地开发阶段进行自动化测试
通过工具，将本地复杂的测试准备工作自动化，以便于在本地进行自动化测试。
线上部署阶段进行自动化测试
线上部署阶段，很容易进行自动化测试的中心化管理，如果有项目没有写测试用例，中心化平台可以做各种操作，如暂停部署等。
本地开发和线上部署两个阶段的自动化测试，需要有机结合起来，保证测试环境的一致性。
工具推荐：
test命令部署
部署阶段，因为是中心化的，所以更容易进行各种检测操作，以保证线上稳定。
它需要：
错误与性能监控
对页面错误和性能的监控是必要的，随着团队规模的不同，监控系统接入的难度不同。
其中，效率最低、准确性最差的是手动添加监控代码。这种我们放弃。
自动添加监控代码包括：
监控代码部署后，就通过各种手段展现、通知责任人，查看优化前后效果对比等。
性能监控系统需要的功能
工具推荐：
前端安全监控
TODO...
将工具收敛
上面在涉及前端工程化的各个环节，我们都推荐了一些工具，可以设想一下，如果每个环节都有一个新的工具要使用，开发起来将是多么痛苦。
所以，前端工程化的一个重要里程碑，是一个工具做完大部分事情。
上述功能，我们建议集成到一个工具里，避免开发者频繁地切换工具。
工具
webpack
webpack 的变化非常快，目前我们的尝试版本是 3.10.0。
使用
分析
IDE
强大的 IDE 可以让开发过程如丝般顺滑。下面是对前端开发而言，比较优秀的 IDE：
更重要的是，这些 IDE 提供了插件机制，想要的功能通过插件大部分能够实现。
资料
LICENSE
MIT
The text was updated successfully, but these errors were encountered: