- 博客(16)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 2-2-6-Git Hooks 介绍
Git Hooks 介绍虽然项目的构建都会集成 lint ，但是在开发过程中难免会出现提交代码之前忘记 lint 的可能。这就可能影响到提交的代码质量。显然光靠口头的约束是不足以完全避免这种问题的。解决方法就是通过 Git Hooks 在代码提交之前强制 lintGit Hooks 介绍Git Hooks 也称之为 git 钩子，每个钩子都对应一个任务（如：commit、push等）通过 shell 脚本可以编写钩子任务触发时要执行的操作。快速上手在 .git 文件中有一个 hooks 文
2020-06-30 00:11:24
312
原创 2-2-5-Prettier 的使用
Prettier 的使用Prettier 是一款通用前端代码格式化工具，几乎可以完成所有类型代码文件的格式化工作，可以通过它完成代码的格式化，包括markdown文档格式化。Prettier 可以格式化的文件类型包括：html css js json scss md jsx vue。快速上手安装yarn add prettier -dev执行 cli 命令yarn prettier filename.ext执行完这个命令之后，prettier 默认的会把格式化之后的代码输出到控制
2020-06-29 20:43:33
144
原创 2-2-4-规范化标准
规范化标准规范化是我们践行前端工程化的重要的一部分为什么要有规范化的标准哪里需要规范化标准实施规范化的方法为什么要有规范化标准软件开发需要多人协同不同的开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现 Lint常见的规范化实现方式ESLint 工具使用定制 ESLint校验规
2020-06-28 13:13:31
123
原创 2-2-3-Rollup
RollupRollup也是一款ESM的打包器，也可以将一些散落的模块打包成整块的代码，从而使得这些划分的模块可以更好的运行再浏览器环境或者nodejs环境。相比于webpack，rollup要小巧的多，webpack可以配合插件实现前端工程化的绝大多部分工作，但是 rollup 只是一个 ESM 打包器，并没有任何其他额外的功能。他的出现也只是为了提供一个充分利用 ESM 各项特性的高效打包器。快速上手yarn add rollup --devyarn rollup ./src/index.js
2020-06-28 13:12:59
228
原创 2-2-2-webpack打包
webpack 打包那对于 ES Modules 的学习，可以从两个维度入手。了解它作为一个规范或者说标准，到底约定了哪些特性和语法；其次，需要学习如何通过一些工具和方案去解决运行环境兼容带来的问题。模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题，但是随着模块化思想的引入，我们的前端应用又会产生了一些新的问题，比如：首先，我们所使用的 ES Modules 模块系统本身就存在环境兼容问题。尽管现如今主流浏览器的最新版本都支持这一特性，但是目前还无法保证用户的浏览器使用情况。
2020-06-28 13:12:29
213
原创 2-2-1-前端模块化开发概述
模块化开发模块化概述模块化是前端项目开发的一个思想，为了更高效更规范的管理日益膨胀的前端项目。内容概要模块化演变过程模块化规范常用的模块化打包工具基于模块化工具构建现代web应用打包工具的优化技巧模块化的演进过程1. Stage 1 - 文件划分方式最早我们会基于文件划分的方式实现模块化，也就是 Web 最原始的模块系统。具体做法是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中，约定每个文件是一个独立的模块。使用某个模块将这个模块引入到页面中，一个 script 标签对
2020-06-28 13:11:37
146
原创 2-1-9-FIS基础使用
FIS基本使用FIS 是一个高度集成的构建工具，相比于gulp需要手动的定义构建任务，FIS只需要直接使用其继承的任务就可以了，不需要开发者自己定义。yarn add fis3 --devfis3 release
2020-06-24 15:36:03
151
原创 2-1-8-Gulp自动化构建案例
useref 文件引用及压缩处理在html中有时会引入一些css 或者js 文件，这些文件当我们打包完成之后就会出现文件路径不对应的情况。针对这个问题可以使用一个 useref 的插件，使用这个插件可以自动地处理html中的构建注释。按照这些构建注释，useref 可以帮我们将文件打包到指定的目录中，并且在这个过程中还可以对文件进行压缩等操作。yarn add gulp-useref --devconst useref = () => { return src('dist/*.ht
2020-06-24 15:35:19
119
1
原创 2-1-7-Gulp基本使用
gulp 基本使用gulpfiles.js// gulp 的入口文件// 运行在node中，所以可以使用CommonJS规范// 在最新的gulp中，取消了同步代码模式，约定每一个任务都是一个异步的任务，// 当一个任务执行结束之后需要通过回调函数标记这个任务完成。exports.foo = done => { console.log(222) done() // 标识任务的完成}// default 任务只需要执行 gulp 就会默认执行exports.def
2020-06-14 16:43:24
108
原创 2-1-6-Grunt基本使用
Grunt 基本使用gruntfile.js// Grunt 的入口文件// 用于定义一些需要 Grunt 自动执行的任务// 需要导出一个函数// 此函数接受一个 grunt 的形参，内不提供一些创建任务时用到的 APImodule.exports = grunt => { grunt.registerTask('foo', ()=> { console.log('hello grunt') }) grunt.registerTask('
2020-06-14 16:42:47
160
原创 2-1-5-自动化构建简介
自动化构建简介自动化构建就是将源代码自动化构建成生产代码。自动化构建工作流。作用：脱离运行环境带来的兼容问题使用提高效率的语法、规范和标准（使用ES Next、Sass、模板引擎）自动化构建示例一个简单的package.json的描述，主要功能就是将scss文件编译成css并在浏览器中自动刷新。{ "name": "automation-sample", "version": "1.0.0", "main": "index.js", "scripts": { "bu
2020-06-14 16:41:57
97
原创 2-1-4-脚手架工作原理
脚手架工作原理脚手架工具就是一个CLI应用。基本都是启动脚手架之后进行命令行交互，根据交互结果结合模板文件形成一个基础的项目结构。开发一个小型的CLImkdir sample-scaffoldingcd sample-scaffoldingyarn init --yes打开 package.json 文件，添加一个 bin 字段。{ "name": "sample-scaffolding", "version": "1.0.0", "main": "index.js", "b
2020-06-14 16:41:26
607
5
原创 2-1-3-脚手架工具-plop
Plop在开发过程中，经常回去创建相同类型的文件，例如在react项目中每一个组件都会由三个文件组成，分别是 .js .css .test.js ,这样每次在创建一个组件的时候都需要去手动的创建这三个文件，而且每个文件中还会由很多基础的代码。每次都得复制很麻烦。plop这个清凉的脚手架就可以帮助我们轻易的去完成一个组件的创建plop 基本使用新建一个plopfile.js文件这个文件是 Plop 的入口文件，需要导出一个函数，这个函数接收一个plop对象，用于创建生成器任务。// plopf
2020-06-14 16:40:55
207
原创 2-1-2-脚手架工具-yeoman
脚手架工具概要脚手架的本质作用就是创建项目基础结构、提供项目规范和约定的工具。相同的组织结构相同的开发范式相同的模块依赖相同的工具配置相同的基础代码内容概要脚手架的作用常用脚手架工具通用脚手架工具剖析开发一款脚手架常用的脚手架工具vue-clicreate-react-appangular-cliyeomanplopYeoman基本使用检查环境node -vnpm -vyarn -v全局安装yarn global add yo安装
2020-06-14 16:40:06
240
原创 2-1-1-工程化概述
工程化的定义和主要解决的问题再前端的开发过程中常常会遇到下面的问题，工程化可以很好的解决。想要使用ES6新特性，但是兼容性有问题想要使用less / Sass / PostCSS增强CSS的编程性，但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性，但运行环境不能支持部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器多人协同开发，无法硬性统一大家的代码风格，从仓库中pull出来的代码质量无法保证部分功能开发时需要等待后端服务接口提前完成一个项目过程中工程化
2020-06-14 16:37:06
400
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人