フロントエンドモジュールマネージャーの概要_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

フロントエンドモジュールマネージャーの概要_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

ウェブサイト開発ではモジュール構造が主流になりました。

ウェブサイトを作る主なタスクは、もはや自分でさまざまな機能を書くことではなく、さまざまなモジュールをどのように組み合わせるかです。

ブラウザ自体はモジュール管理メカニズムを提供していないため、各モジュールを呼び出すために、Web ページに大量のスクリプトタグを追加する必要がある場合があります。これにより、Web ページが肥大化して保守が困難になり、大量の HTTP リクエストが生成されるため、表示速度が低下し、ユーザーエクスペリエンスに影響を与えます。

この問題を解決するために、フロントエンドモジュールマネージャー（パッケージ管理）が登場しました。さまざまな JavaScript スクリプトの依存関係を簡単に管理し、各モジュールを自動的にロードして、Web ページの構造を明確かつ合理的にすることができます。今後、すべてのフロントエンド JavaScript プロジェクトはこの方法で開発されるべきであると言っても過言ではありません。

最も初期で最も有名なフロントエンドモジュールマネージャーは、他でもない RequireJS です。 AMD フォーマットを使用し、さまざまなモジュールを非同期的にロードします。具体的な使い方については、私が書いたチュートリアルを参照してください。 Require.js の問題は、さまざまなパラメーターの設定が煩雑で、学習が難しく、完全に習得するのが難しいことです。さらに、実際のアプリケーションでは、サーバー側ですべてのモジュールをマージし、均一にロードする必要があることが多く、これにより多くの作業負荷が追加されます。

今日は、他の 4 つのフロントエンドモジュールマネージャー、Bower、Browserify、Component、Duo を紹介します。それぞれに独特の特徴があり、Require.js の欠点をうまく補っており、フロントエンド開発にとって強力なツールです。

この記事はこれら 4 つのモジュールマネージャーのチュートリアルではないことに注意してください。読者が全体的な印象を持ち、特定の種類の作業を完了できる特定のツールがあることを知っていただけるように、最も簡単な例を使用してそれらの用途を説明したいと思います。詳しい使用方法については、それぞれのドキュメントを参照してください。

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 サブディレクトリにダウンロードすることを意味します。ダウンロードしたら、Web ページに直接挿入できます。

　　<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

上記コードのuniqモジュールはCommonJS形式なのでブラウザでは実行できません。この時点で、Browserify が登場し、上記のコードをブラウザスクリプトにコンパイルします。

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

生成されたbundle.jsはWebページに直接挿入できます。

　　$ browserify robot.js > bundle.js

Browserify がコンパイルされると、スクリプトが依存するモジュールも一緒にコンパイルされます。つまり、複数のモジュールを 1 つのファイルに結合できます。

コンポーネント

コンポーネントは、Express フレームワークの作者である TJ Holowaychuk によって開発されたモジュールマネージャーです。その基本的な考え方は、Web ページに必要なさまざまなリソース (スクリプト、スタイルシート、画像、フォントなど) をコンパイルし、それらを同じディレクトリ (デフォルトはビルドディレクトリ) に配置することです。

まずコンポーネントをインストールします。

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

上記のコードでコンポーネントのバージョンを指定する必要があるのは、バージョン 1.0 がまだ正式にリリースされていないためです。

次に、プロジェクトのルートディレクトリに新しいindex.htmlを作成します。

　　$ npm install -g component@1.0.0-rc5

上記コードのbuild.cssとbuild.jsがComponentで生成される対象ファイルです。

次に、プロジェクトのルートディレクトリにプロジェクト構成ファイルとして新しいcomponent.jsonファイルを作成します。

　　<!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>

上記のコードでは、JavaScriptスクリプトとスタイルシートを指定する元のファイルはindex.jsとindex.cssで、スタイルシートは正規化モジュールに依存しています(バージョン3.0.0以上、バージョン以下) 4.0）。ここで注意していただきたいのは、Componentモジュールの形式は「githubのユーザー名/プロジェクト名」ということです。

最後にコンポーネントビルドコマンドを実行してファイルをコンパイルします。

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

コンパイル中に、コンポーネントは自動的に autoprefixer を使用してブラウザーのプレフィックスを CSS プロパティに追加します。

現在、Component は半年近くコードリポジトリが変更されていない状態のようです。公式も次に紹介する 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 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

React static Page構成：React-AppReviredを使用したコード圧縮を避ける方法は？Apr 05, 2025 pm 01:18 PM

React-App-Recrowiredを使用して静的ページを構築するときにコード圧縮を回避する方法について多くの開発者が配信したい...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、