前端工程化

工程结构

├── 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。node

README.md

README.md 文件应该以下内容:git

示例项目npm

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

单元测试

组件构建以前默认调用 'npm chr-test' 进行测试。json

examples

项目中应该包含一个覆盖项目大部分 API 的实例程序,若是文档表述不清楚,则调用者能够按照实例程序的方式来使用。
若是是不一样种类的例子,建议分文件夹存放。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)bash

安装

脚手架基于 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 等信息,而后根据改动类型,对修改版本号,版本号更改要严格遵循

相关文章
相关标签/搜索