前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考 很多小伙伴会狭隘的认为工程化就是webpack或者gulp打包而已, 应该涵盖从项目创建、开发、编译、打包、测试、发布、监控全流程。 项目初始化 项目脚手架目前已经非常普遍,例如create-react-app或者vue-cli都是官方标准的脚手架工具。对于一些稍大的公司都建议自己包装一套自己的脚手架,这样可以沉淀很多最佳实践,例如工程目录结构、lint配置、监控配置、打点配置等等,因此脚手架是落地前端架构标准化不可或缺的一环。 本地开发 lint 的规范一定要在项目初期就落地,可以直接拿airbnb的规范或者再定制化一下。lint可以极大的提升代码质量,至少从代码风格来看可以保证统一。 Sonar 的引入可以进一步提升代码质量,帮助分析出潜在的问题,同时分析代码的重复率,过长的高数等等,这些都是所谓的代码bad smell,如果任其发展下去,项目维护成本会直线上升。 Mock工具的必要性在前后端联调时就能充分提现,很多时候由于前后端接口定义不清晰导致联调过程就是一个扯皮过程,如果缺乏mock工具,前端也会沦为后端接口调试的触发器,前端页面点一下,后端调试大半天,前端小伙伴们伤不起啊。Mock工具至少要有接口定义和本地mock的能力,能够极大提升大家研发体验。 打包 前端工程打包工具强烈推荐 webpack 4,强大的插件能力能够让你做几乎任何事情。webpack4中引入了更为强大智能的code split能力,能够极大缩减包大小,经过实践通常减小幅度都在30%-50%,而且在打包速度上也有很大改进,通常也有30%的提升。

Continue reading

自用 脚手架 cxn-cli use vue-template & publish https://www.npmjs.com/package/cxn-cli - 续更 填坑之路: [1] .cxnrc 文件: 在 C:\Users\Administrator.PC-20170224PLKZ 用户目录下 registry=xn213 type=users [2] Error: Couldn't find preset "env" relative to directory "D:\\Acx\\xn-cli" debugger: 安装依赖 babel-preset-env [3] 发布: 需要登录npm: npm login, 完了使用 npm publish 发布到npm上 [4] 关于包名: 在 package.json → "name": "cxn-cli", 发布的包名, 不能和npm上的重复, 重复会报错没有权限上传这个包, 因为是别人发布的,,, 版本: "version": "1.0.1", 升级一版根据相关规则修改,然后发布; [5] 命令行创建项目命令: cxn init vue-template myvue 其中 vue-template 是要克隆的github上模板, myvue 是创建在本地的 自己的项目名字

Continue reading

Fe Sources

前端技术日新月异,随着 大前端 的趋势,想要成为一名合格的前端工程师,需要学习掌握的东西更是宽泛。所以我们在寻求进阶的过程中,既要不断夯实前端基础,也要快速响应技术的更新迭代。闲话少说,这次给大家整理分享一些前端进阶的优质学习资源,希望对大家有所帮助! 前端进阶必备,github 优质资源整理分享! github 优质项目 frontend-tech-list 前端技术清单,不论你是正在自学前端,还是对前端某些技术熟练掌握但某些还未涉足,我都希望这份清单能帮助你 review 一些前端的基础能力。 github 前端技术清单 0. 年度报告 1. 基础拾遗 1.1. JavaScript 1.2. CSS 1.3. 浏览器 2. 工程化与工具 2.1. webpack 2.2. Gulp 2.3. Linter 2.4. 静态类型(Typescript/Flow) 2.5. Babel 2.6. CSS预处理与模块化 3. 性能优化 3.1. 加载性能 3.2. 运行时性能 3.3. 前端缓存 3.4. 性能调试与实践 3.5. 性能指标 4. 安全 4.1. XSS 4.2. CSRF 4.3. CSP 4.

Continue reading

编码规范

CodeStyle, 代码风格 一 Code Style 使用 arrow 函数代替匿名函数表达式。 只要需要的时候才把 arrow 函数的参数括起来。 比如,(x) => x + x 是错误的,下面是正确的做法: i. x => x + x ii. (x,y) => x + y iii. <T>(x: T, y: T) => x === y 总是使用 {} 把循环体和条件语句括起来。 开始的 { 总是在同一行。 小括号里开始不要有空白. 逗号,冒号,分号后要有一个空格。比如: i. for (var i = 0, n = str.length; i < 10; i++) { } ii. if (x < 10) { } iii.

Continue reading

Hugo Create Blog

hugo 基于 go 语言, 相对于 hexo 步骤简单, 不易出错; hexo 需要安装很多依赖 使用 hugo 创建博客 一. 安装 hugo OS : brew install hugo win : 下载 Hugo https://github.com/gohugoio/hugo/releases 下载 32⁄64 位 查看版本命令 hugo version window 需配置环境变量;(在安装路径下 打开命令行 输入也可以查看版本) 配置环境变量: 系统>高级系统设置>环境变量>系统变量>新建:变量名随意不冲突就行如 HUGO,变量值为 hugo.exe 所在的路径文件夹(不需写hugo.exe)确定,然后找到用户变量 PATH 编辑, 在变量值最后加上;%刚才写的变量名%,如: ;%HUGO% , 注意前后分号; 二. 创建 命令: hugo new site <项目名> 快到你不敢相信 秒建 三. 主题 hugo 主题库 https://themes.

Continue reading

Author's picture

xn213

余生 倾尽天下

FE

Peking