zoukankan      html  css  js  c++  java
  • 前端工程化

    工程结构

    ├── 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 等信息,然后根据改动类型,对修改版本号,版本号更改要严格遵循

  • 相关阅读:
    Mac下安装zsh(Oh My ZSH)的shell,替代原有的bash
    Mac下配置环境变量重启后不生效解决(.bash_profile vs .bashrc)(bash/zsh下不加载.bashrc问题解决)
    Mac下配置环境变量(转)
    Jenkins配置Publish Junit test result report(转)
    Mac下配置Java Web开发环境(Mac 10.12)
    Mac下配置idea(Mac 10.12)
    Sublime Text 3安装插件(Mac 10.12)
    Sublime Text 3新建工程
    Mac下快速新建txt文件
    Mac下配置maven和集成到ecclipse(Mac 10.12)
  • 原文地址:https://www.cnblogs.com/coder-zyz/p/6749008.html
Copyright © 2011-2022 走看看