前端模块管理器简介_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

前端模块管理器简介_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

　模块化结构已经成为网站开发的主流。

　　制作网站的主要工作，不再是自己编写各种功能，而是如何将各种不同的模块组合在一起。

　　浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。

　　为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端JavaScript项目，应该都会采用这种方式开发。

　　最早也是最有名的前端模块管理器，非RequireJS莫属。它采用AMD格式，异步加载各种模块。具体的用法，可以参考我写的教程。Require.js的问题在于各种参数设置过于繁琐，不容易学习，很难完全掌握。而且，实际应用中，往往还需要在服务器端，将所有模块合并后，再统一加载，这多出了很多工作量。

　　今天，我介绍另外四种前端模块管理器：Bower，Browserify，Component和Duo。它们各自都有鲜明的特点，很好地弥补了Require.js的缺陷，是前端开发的利器。

　　需要说明的是，这篇文章并不是这四种模块管理器的教程。我只是想用最简单的例子，说明它们是干什么用的，使得读者有一个大致的印象，知道某一种工作有特定的工具可以完成。详细的用法，还需要参考它们各自的文档。

　Bower

　　Bower的主要作用是，为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。

　　首先，安装Bower。

　　$ npm install -g bower

　　然后，使用bower install命令安装各种模块。下面是一些例子。

　　# 模块的名称　　$ bower install jquery　　# github用户名/项目名　　$ bower install jquery/jquery　　# git代码仓库地址　　$ bower install git://github.com/user/package.git　　# 模块网址　　$ bower install http://example.com/script.js

　　所谓"安装"，就是将该模块（以及其依赖的模块）下载到当前目录的bower_components子目录中。下载后，就可以直接插入网页。

　　<script src="/bower_componets/jquery/dist/jquery.min.js">

　　bower update命令用于更新模块。

　　$ bower update jquery

　　如果不给出模块的名称，则更新所有模块。

　　bower uninstall命令用于卸载模块。

　　$ bower uninstall jquery

　　注意，默认情况下，会连所依赖的模块一起卸载。比如，如果卸载jquery-ui，会连jquery一起卸载，除非还有别的模块依赖jquery。

　Browserify

　　Browserify本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。

　　首先，安装Browserify。

　　$ npm install -g browserify

　　然后，编写一个服务器端脚本。

　　var uniq = require('uniq');　　var nums = [ 5, 2, 1, 3, 2, 5, 4, 2, 0, 1 ];　　console.log(uniq(nums));

　　上面代码中uniq模块是CommonJS格式，无法在浏览器中运行。这时，Browserify就登场了，将上面代码编译为浏览器脚本。

　　$ browserify robot.js > bundle.js

　　生成的bundle.js可以直接插入网页。

　　<script src="bundle.js"></script>

　　Browserify编译的时候，会将脚本所依赖的模块一起编译进去。这意味着，它可以将多个模块合并成一个文件。

　Component

　　Component是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。

　　首先，安装Component。

　　$ npm install -g component@1.0.0-rc5

　　上面代码之所以需要指定Component的版本，是因为1.0版还没有正式发布。

　　然后，在项目根目录下，新建一个index.html。

　　<!DOCTYPE html>　　<html>　　  <head>　　    <title>Getting Started with Component</title>　　    <link rel="stylesheet" href="build/build.css">　　  </head>　　  <body>　　    <h1 id="Getting-Started-with-Component">Getting Started with Component</h1>　　    <p class="blink">Woo!</p> 　　   <script src="build/build.js"></script>　　  </body>　　</html>

　　上面代码中的build.css和build.js，就是Component所要生成的目标文件。

　　接着，在项目根目录下，新建一个component.json文件，作为项目的配置文件。

　　{　　  "name": "getting-started-with-component",　　  "dependencies": {　　    "necolas/normalize.css": "^3.0.0"　　  },　　  "scripts": ["index.js"],　　  "styles": ["index.css"]　　}

　　上面代码中，指定JavaScript脚本和样式表的原始文件是index.js和index.css两个文件，并且样式表依赖normalize模块（不低于3.0.0版本，但不高于4.0版本）。这里需要注意，Component模块的格式是"github用户名/项目名"。

　　最后，运行component build命令编译文件。

　　$ component build　　   installed : necolas/normalize.css@3.0.1 in 267ms　　       build : resolved in 1221ms　　       build : files in 12ms　　       build : build/build.js in 76ms - 1kb　　       build : build/build.css in 80ms - 7kb

　　在编译的时候，Component自动使用autoprefixer为CSS属性加上浏览器前缀。

　　目前，Component似乎处于停止开发的状态，代码仓库已经将近半年没有变动过了，官方也推荐优先使用接下来介绍的Duo。

　Duo

　　Duo是在Component的基础上开发的，语法和配置文件基本通用，并且借鉴了Browserify和Go语言的一些特点，相当地强大和好用。

　　首先，安装Duo。

　　$ npm install -g duo

　　然后，编写一个本地文件index.js。

　　var uid = require('matthewmueller/uid');　　var fmt = require('yields/fmt');　　　　var msg = fmt('Your unique ID is %s!', uid());　　window.alert(msg);

　　上面代码加载了uid和fmt两个模块，采用Component的"github用户名/项目名"格式。

　　接着，编译最终的脚本文件。

　　$ duo index.js > build.js

　　编译后的文件可以直接插入网页。

　　<script src="build.js"></script>

　　Duo不仅可以编译JavaScript，还可以编译CSS。

　　@import 'necolas/normalize.css';　　@import './layout/layout.css';　　　　body {　　  color: teal;　　  background: url('./background-image.jpg');　　}

　　编译时，Duo自动将normalize.css和layout.css，与当前样式表合并成同一个文件。

　　$ duo index.css > build.css

　　编译后，插入网页即可。

　　<link rel="stylesheet" href="build.css">

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?

온라인 코드 편집기는 코드 입력을 구현하는 데 사용하는 HTML 요소는 무엇입니까?Apr 05, 2025 pm 01:21 PM

웹 코드 편집기의 HTML 요소 분석 많은 온라인 코드 편집기를 사용하면 사용자가 HTML, CSS 및 JavaScript 코드를 입력 할 수 있습니다. 최근에 누군가가 제안했습니다 ...

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.