前端开发指南
前端工具简介
ECMAScript
由国际组织 ECMA 定义的一套脚本语言规范, JavaScript 是该标准的实现,如今的标准版本为 ECMAScript 6 通常称为 ES6 。
NPM
NPM (Node Package Manager , Node 包管理器) 是 node.js 默认的包管理工具,以 JavaScript 编写。
项目根目录下的 package.js 文件就是该项目的依赖配置文件, npm 根据该配置文件自动下载安装依赖模块。 下面是一个 package.json 文件示例:
{
// 项目名称,必填
"name": "Hello World",
// 项目版本,必填
"version": "0.0.1",
// 项目作者,选填
"author": "张三",
// 项目描述,选填
"description": "第一个node.js程序",
// 项目关键词,选填
"keywords": ["node.js", "javascript"],
// 项目仓库地址,选填
"repository": {
"type": "git",
"url": "https://path/to/url"
},
// 项目使用的开源协议,选填
"license": "MIT",
// 项目的引擎版本
"engines": { "node": "0.10.x" },
// bug反馈地址,以及邮箱
"bugs": { "url": "http://path/to/bug", "email": "bug@example.com" },
"contributors": [{ "name": "李四", "email": "lisi@example.com" }],
// 指定脚本命令的缩写,比如下面的代码表示命令行执行 npm run start 时,执行的是 node index.js 。
"scripts": {
"start": "node index.js"
},
// 指定项目运行需要的软件包
"dependencies": {
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
// 指定项目开发时需要的软件包
"devDependencies": {
"bower": "~1.2.8",
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"browserify": "2.36.1",
"grunt-browserify": "~1.3.0"
}
}
版本号限定符:
~1.2.8表示安装 1.2.x 的最新版本(不低于 1.2.8),但是不安装 1.3.x,也就是说安装时不改变大版本号和次要版本号。^2.36.1表示安装 1.x.x 的最新版本(不低于 1.2.2),但是不安装 2.x.x,也就是说安装时不改变大版本号。需要注意的是,如果大版本号为 0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。
Webpack
Webpack 是 JavaScript 的静态代码打包器。
参考文档: https://www.webpackjs.com/concepts/
Vue-CLI
Vue 项目搭建脚手架,通过脚手架,我们可以在命令行快速完成项目的搭建,生成基础配置信息等。
Vue Router
Vue 内置的路由管理工具,与 Vue 深度融合。
官方文档:https://next.router.vuejs.org
Vuex
Vue 内置的状态管理库。用于解决页面中多个组件依赖与同一状态带来的问题
- 因为组件之间状态是相互隔离的,传统方式是传递 props 来完成组件间通信,当组件树越来越复杂了,这种方式将变得异常复杂;
- 多个组件的动作有可能影响同一片状态,而组件间各自维护自己的状态,造成了状态的冗余,降低代码可维护性。
Vuex 统一管理这些需要共享的状态就可以解决这些问题。
官方文档: https://next.vuex.vuejs.org
ESLint
JavaScript 代码检查工具。
官方文档:https://cn.eslint.org/docs/user-guide/getting-started
Sass
Sass(Syntactically Awesome StyleSheets)是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
官方文档:https://www.sass.hk/docs/
PostCSS
PostCSS 是一个使用 JavaScript 转换 CSS 的工具。可以规范 CSS 代码,支持变量和混淆等等。
官方文档:https://www.postcss.com.cn/
Babel
Babel 是一个 JavaScript 编译器,主要采用 ECMAScript 2015+ 的语法将代码转换为向后兼容的 JavaScript 语法,以便保证旧版浏览器的兼容性。
官方文档:https://www.babeljs.cn/docs/
Cypress
Cypress 是为现在网络模型搭建的下一代前端测试工具。提供了编写端到端测试、集成测试、单元测试的能力。
官方文档:https://docs.cypress.io/guides/overview/why-cypress
Travis CI
Travis CI 是一个自动化测试集成工具。