捣鼓前端那些事儿

最新推荐文章于 2025-06-26 22:43:19 发布

EugeneHeen

最新推荐文章于 2025-06-26 22:43:19 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/eugeneheen/article/details/68062137

Web前端专栏收录该内容

3 篇文章

订阅专栏

环境工具

当前前端的技术随着互联网化的发展，新的玩意儿层出不穷，犹如井喷一般的涌现了一大批解决不同领域问题的工具。按照前端技术的开发需求，出现了包管理、工具集、工程构件、全栈框架、MVVC框架等众多分类，这些分类所提供的无论是工具、技术框架均是为了解决快速化、流程化、标准化的进行前端应用开发。

基础设置

我们要使用这些工具，他们大多都会有一个共同特点，例如：包管理会自动下载相关依赖的框架相关文件、node.js相关的工具模块包等。所以我们的核心需要当今非常成熟稳定应用面很广的Git，当今技术领域众多项目均托管在GitHub及其他Git仓库上。

安装Git

Linux的安装
我们这里采用最简便通用的yum安装来进行安装。

$ yum -y install git

Windows的安装
在Windows系统上安装也非常简便，我们通过到官网https://git-scm.com/download/win，根据Windows版本下载.exe安装包，双击启动安装向导保持默认选项一气呵成的Next完成安装，此处不再赘述。

安装Node.JS

可以暂且将Node.JS，理解是一个基于Chrome V8引擎的JavaScript运行环境，它是使用C++进行编写的。Node.JS是非阻塞、时间驱动的轻量级、高效处理模型，它拥有很好的包管理生态系统，安装Node.JS后，自带了NPM(node package manager)通过它进行Node.JS相关包、模块的管理。

关于Node.JS的简要教程，请参见我的另外一篇博文，分别进行了Windows和Linux系统的安装及其他相关常用知识进行了详细说明。
NodeJS简要教程：http://blog.youkuaiyun.com/eugeneheen/article/details/53636442

包管理

Yarn

官网地址
https://yarnpkg.com

网页顶部搜索框输入报名，可进行Yarn相关依赖包的查询
安装
安装Yarn之前，需要确保已经完成Node.JS的安装，Yarn是一个全新的包管理器，它提供了MacOS、Windows、Linux系统安装环境，平台兼容非常好。它急速、超级安全、超级可靠。
- Windows
  我们下载.exe的安装文件，根据安装向导完成安装即可。
- Linux
  我们依然采用简单好用的yum安装

     $ wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
     $ yum install yarn

通过命令查看当前Yarn的版本号，确认安装是否成功（成功获取版本号则顺利完成安装）。

$ yarn --version

使用说明
首先，我们必须在命令行切换到工程的根目录，执行初始化命令，生成package.json（不理解这里的，请查看上文安装Node.JS章节提及的NodeJS简要教程）

$ yarn init
yarn init v0.21.3
question name (student): student
question version (1.0.0): 1.0.0
question description: 这是一个学习使用的工程
question entry point (index.js):
question repository url:
question author: Eugene
question license (MIT):
success Saved package.json
Done in 52.35s.

添加依赖
安装依赖到你的项目，等同于NPM的install命令，指定了–save-dev选项

     $ yarn add [package]
     $ yarn add [package]@[version]
     $ yarn add [package]@[tag]

升级依赖包

     $ yarn upgrade [package]
     $ yarn upgrade [package]@[version]
     $ yarn upgrade [package]@[tag]

移除依赖包

$ yarn remove [package]

安装项目全部依赖包
安装 package.json 文件里定义的所有依赖

$ yarn

或者

$ yarn install

[package]：依赖包的包名
@[version]：指定依赖包的版本号
@[tag]：指定依赖包的标签号（比如 beta、next 或者 latest）

更多的命令行详细说明请查看：https://yarnpkg.com/zh-Hans/docs/cli/

基本工作流你应该知道几个简单的事：
1. 创建一个新项目
2. 增加／更新／删除依赖
3. 安装／重装你的依赖
4. 和版本控制一起工作（例如 git）
5. 持续集成

Bower

官方地址
https://bower.io
依赖包查询地址
https://bower.io/search/

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

Bower的运行必须依赖于Node.JS、Git。Bower使用Git下载相关包资源。

安装
首先，需要明确的是由于Bower是全局使用的，所以安装时需要明确这一点

$ npm install -g bower

通过命令行查询Bower版本，确认是否安装成功

$ bower -v

使用说明

Bower用户包的管理与Yarn是完全不同的，它会将最终试问的文件和源码全部通过Git下载下来，共开发时使用。我们需要在使用Bower的工程
根目录执行初始化命令来使得本工程可以使用Bower。

初始化完成后，工程的根目录会生成一个bower.js文件和bower_components目录。
bower.js文件定义了要使用的前端的包，以及发布的路径，其中main就是把这些包存到哪个目录，dependencies定义了使用那些包。
bower_components目录存放通过Bower安装的包，我们要使用的JavaScript、CSS之类框架相关文件全部存放在此目录。

$ bower init

? name test
? description 这是一个测试工程
? main file
? keywords
? authors eugene <eugene@wosbb.com>
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

{
  name: 'test',
  authors: [
    'eugene <eugene@126.com>'
  ],
  description: '这是一个测试工程',
  main: '',
  license: 'MIT',
  homepage: '',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

执行初始化命令后，填写回答问题，全部回答Y（Yse），完成初始化。

安装包

$ bower install [options] [package][#version]

[options]：安装指令选项，–save代表安装依赖时，同时添加到bower.js配置文件的dependencies配置项中。
[package][#version]：注意，包和版本之间没有空格，指定由Bower来安装管理的包及指定版本号。[package]还可以制定git仓库地址，例如，安装1.12.4版本的jQuery：

$ bower install jquery#1.12.4 #通过包名和版本号

$ bower install https://github.com/jquery/jquery.git #通过Git仓库地址

更新安装包

$ bower update [options] [package]

[options]：安装指令选项，-F强制使用最新版本更新，–save代表安装依赖时，同时更新配置到bower.js配置文件的dependencies配置项中。
[package]：指定由Bower来更新管理的包。例如，更新jQuery：

$ bower update jquery

卸载安装包

$ bower uninstall [options] [package]

[options]：安装指令选项，–save代表安装依赖时，同时卸载配置到bower.js配置文件的dependencies配置项中。
[package]：指定由Bower来更新管理的包。例如，卸载jQuery：

$ bower uninstall jquery

更多的命令行详细说明请查看：https://bower.io/docs/api/

项目构建

官方地址
http://yeoman.io/
查找Yeoman脚手架生成器
http://yeoman.io/generators/

Yeoman是Google的团队和外部贡献者团队合作开发的一个项目。它通过脚手架工具（yo）、构建工具（Grunt | Gulp）、包管理工具（NPM | Bower）的协同工作，我们提供一个高效规范的前端开发的工作流程。

安装

使用Yeoman，需要依赖Git、Node.JS，请保证这些基础环境已安装。

$ npm install -g yo

查询Yeoman的版本，确认是否安装成功

$ yo --version

使用Yeoman通过生成器模块生成项目目录

$ yo [generator]

[generator]（生成器）需先通过NPM进行安装

Yeoman使用的基本流程：
1. 安装Yeoman
2. NPM安装生成器
3. 通过Yeoman使用NPM安装的生成器生成项目脚手架（整个项目目录包括代码目录、相关集成环境配置文件、构建脚本，生成器会为我们生成一个完整的开发工程目录结构及集成环境）
4. 运行构建工具（Grunt | Gulp）的Sever
5. 通过包管理器管理工程所使用的相关包模块（NPM | Bower）
6. 编码实现
7. 测试
8. 运行构建工具（Grunt | Gulp）打包任务
新手入门推荐

作为新手，我个人推荐你好好花心思动手学习一下官方的Tutorial教程，教程地址：http://yeoman.io/codelab/index.html。