前端工程化

工程结构

├── src
├── dist
├── example
├── docs
├── index.js
├── package.json
├── README.md
├── .gitignore
└── .npmignore

src - 项目的源码,开发阶段在这个目录进行dist - 存放构建之后的文件的目录,如果不需要引用源码,则可以直接引用该目录下的文件。
examples - 示例,调用方法示例。
docs - 项目文档,如果文档内容太多,不方便全部写到 README 中,可以下 docs 目录下新建 Markdown 文件。
test - 测试,单元测试文件
index.js - 项目入口文件,package 中的入口文件默认指向此文件。package.json - npm 配置,包含项目名称、版本、依赖、作者、运行命令等基本信息。
README.md - 项目说明文件,gitlab/hub、npm 等平台会默认展示该文件的内容,作为项目介绍。
.gitignore - 配置不需要提交的 git 上的文件,通常为编译生成的文件和目录、编辑器/IDE 的配置文件。
.npmignore - 配置不需要提交到 npm 上的文件。
.npmrc - 项目级别的 npm 配置,用于设置 registry。

README.md

README.md 文件应该如下内容:

示例项目

  1. 解决什么问题
    简介的描述模块的作用。
  2. 如何调用
    尽量给出完整可执行的代码,如果给出伪代码,也尽量省略常识性内容。
  3. 配置项
  4. 已知问题 & notes
    在什么环境下会出现什么问题,如何规避。
  5. 迭代计划

单元测试

组件构建之前默认调用 ‘npm chr-test‘ 进行测试。

examples

项目中应该包含一个覆盖项目大部分 API 的实例程序,如果文档表述不清楚,则调用者可以按照实例程序的方式来使用。
如果是不同种类的例子,建议分文件夹存放。

npm script

在自动构建时,构建程序会调用 npm scripts 中的命令。
也建议将项目常见的操作写成 npm script。
保留如下命令:
chr-build:
chr-test:

组件创建脚手架

generator-pkg

chr-npm 模块脚手架 @chr/generator-pkg(http://npm.corp.chinahr.com/package/@chr/generator-pkg)

安装

脚手架基于 Yeoman(http://yeoman.io) 开发,所以需要先安装 Yeoman.

bash
npm --version 
npm install -g yo
npm install -g @chr/generator-pkg --registry http://npmapi.corp.chinahr.com

然后就可以使用脚手架生成模块框架了

bash
mkdir foo
cd foo
yo @chr/pkg

选项说明

name

项目名称,默认为文件夹名称,只能用中文,也会用于 git 上的项目名称,以及 git 的 repo url,所以不能出现除 之外的符号。

desc

项目描述,用于 package.json 中的 desc 字段和 git 上的项目描述,支持中文。

type

项目类型,适用于浏览器或 node, 或者两者都合适,目前没什么作用

author

作者,英文,用于 package.json 中的 author, 尽量使用 OA 用户名

脚手架做了什么事情

  1. 收集用户输入,确定项目基本信息
  2. 复制模板到项目中,并替换其中的变量
  3. 在 http://10.0.0.236/npm 分组下创建同名项目
  4. 在项目目录下初始化 git repo,并设置上一步中的 repo url 为 git remote origin
  5. 将项目目录下现有文件 commit, 并 push 到 origin/master
  6. 完成项目生成

问题

  1. 如果远程服务器上存在同名项目,脚手架 3 步以后会失败,所以务必保证项目不要重名
  2. 项目中含有 example 字样,在 gitlab 上会 404,不能 100% 复现

组件发布

由于 cnpmjs.org 的限制,只有在配置文件中写明的用户才能够发布组件。

所以,考虑到这个用户名单维护的成本,不计划使用每个用户都可以发布的方式。

发布方案

组件发布借助 gitlab 和 jenkins, 在组件发布工具中触发发布操作,发布工具会从对应 repo 中拉取代码,执行构建,并发布到 npm 仓库。

发布前的改动

根据本次改动,更新 README.md 与 examples 等信息,然后根据改动类型,对修改版本号,版本号更改要严格遵循

时间: 2024-12-20 13:11:26

前端工程化的相关文章

爆栈之前端工程化技术小结备案

ps,前些天一90后同事说,要我多写些blog,因为你的实力要show给别人知道,就要怎样怎样的.. 同时建议写个工程化架构来简化工作等等.有时觉得有点对,又觉得有点可笑,有觉得有点无奈... 由于本人是重后端技术,所以对前端技术了解并不深入. 由于很多都是原始pc的web,而且大多都是轻前端项目.所以这里先说下以前用到过的前端js技术大多是: jquery,extjs,easyui,ko,bootstrap,dorado等等,当然还有各种各样的,如日历,上传,富编辑器,报表等等js插件. 但现

HTML5移动应用开发为什么需要引入前端工程化

使用HTML5和Javascript开发的移动应用,和典型的现代Web前端项目一样,有着大量的Javascript,HTML和CSS代码,因此前端工程化在HTML5移动应用开发中同样有着重要意义,可以避免大量重复性的工作,提供效率和质量,优化产品的性能. 目前前端工程化比较通用的框架主要有国外的grunt,gulp,百度的F.I.S等,这些框架基本上都是基于Node.js实现的(百度的F.I.S最早是基于PHP开发的,后来切换到Node.js).Node.js对前端工程师有着非常强的亲和力,有各

论前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

前端工程化(摘抄)

目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了.现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了.工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?... 前端工程化是前端架构中重要的一环,就是为了解决上述各种效率方面的问题的.而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程. 那么前端工程化需要考虑哪些因素?我认为前

到底是什么是前端工程化、模块化、组件化

引言 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图.布局.扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化.组件化.模块化.MVC这些"高大上"的词汇云里雾里.本文用最简单的语言介绍一下我对工程化.组件化.模块化的理解

论前端工程化(转载)

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

58到家周俊鹏:webpack PK fis,实现前端工程化我更喜欢前者

责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」.另可申请加入CSDN前端开发QQ群:465281214. 2016年,SDCC(中国软件开发者大会)相继走进了上海.深圳.成都.杭州各地.11月18日-20日将在北京完美收官.作为大会的重要分专题,前端开发专题已邀请到58到家高级前端工程师周俊鹏担任大会讲师,现场将分

[转]基于gulp和webpack的前端工程化

本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux Node.js 我们的需求 基于CommonJS模块化开发 基于React.js的组件化开发(JSX) 为保证组件的复用,css需要打包到js中 有国际化需求,静态文件需要部署在CDN上面 工程化工具的选择 gulp(基于stream的构建工具,与grunt相比,速度快且可编程) webpack(前

谁妖魔化了前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前