春の雲

Jspm＆SystemJSチュートリアル



Jspm Systemjs Tutorial



目次

私の経験では、フロントエンド開発で解決すべき問題は2つのフェーズに分けることができます。



  1. 開発段階
  2. 展開フェーズ

開発フェーズは解決されます：

  1. サードパーティパッケージのインストール、使用、依存関係のメンテナンス
  2. 依存関係の維持と独自のコードの使用

開発段階でのソリューションについて話しましょう。



パッケージマネージャー ＃

元々jQueryサイトにあったドキュメントは、次のように記述されている可能性があります。

  1. jquery.min.jsファイルをダウンロードします
  2. jsディレクトリに保存
  3. HTMLファイルで使用scriptタグ参照jquery

jQueryは他のライブラリに依存しないため、上記の操作は比較的簡単です。

ただし、BootstrapがjQueryに依存しているなどの依存関係が発生した場合は、BootstrapとjQueryを別々にダウンロードする必要がある場合があります。幸い、このタイプのサードパーティライブラリは通常、依存関係をダウンロードファイルにパックします。ただし、別のライブラリもjQueryをパッケージ化していて、バージョンがBootstrapのパッケージと矛盾している場合は、別の問題があります。このような状況は珍しくなく、開発カタログは最終的に制御不能になることは想像に難くありません。パッケージの追加は簡単で、削除は困難です。さらに、これを手作業で行うのは非効率的です。



パッケージマネージャーの意味はここにあります。詳細をカプセル化し、ニーズを自動化します。私たちは質問をする必要があるだけです、彼らは答えを提供します：

  1. jQueryを使いたい-そうですね、bower install jquery
  2. Bootstrapを使いたい– OK、bower install bootstrapちなみに、jQueryでインストールされます。
  3. 私はそれについて考えました、またはブートストラップを削除します-OK、bower uninstall bootstrap

パッケージマネージャーは依存関係のリストを維持しており、関係は一目でわかります。

もちろん、上記は バウアー たとえば、市場にはまだ多くの同様の製品があります。 duojs この記事の主人公 jspm これも1つであり、npmもカウントされます。

ローダ ＃

パッケージマネージャーは、さまざまなモジュールを管理する必要性を解決します。次に、これらのモジュールを使用して開発し、次にこれらのモジュールの使用方法の問題に遭遇します。

ES6モジュールの現在の標準は、ブラウザに完全には実装されていません。移行中、規範的または非標準的なモジュールが多数あります。

  1. CommonJS
  2. AMD
  3. ES6モジュール
  4. 名前空間モードの定義
  5. その他

AMDのように、単一の仕様のみを使用する場合は、 RequireJS ES6モジュール、使用する場合があります ES6モジュールローダーポリフィル CommonJS仕様モジュール、使用する場合があります SystemJS – AMD / ES6モジュールのロードにも使用できます。

CSSローダー？ ？

上記のローダーは通常、JavaScriptモジュール用です。 CSSには厳密なモジュールはありません。それはどのように管理されていますか？もちろん、パッケージマネージャーはパッケージのCSSファイルと一緒に管理されます。では、これらのモジュールでCSSをどのように使用するのでしょうか。 SystemJSの場合、プラグインを介して実行できます。importこのコマンドはCSSを動的に挿入します。パッケージ化されると、SystemJSはデフォルトでCSSファイル全体をJSファイルにパッケージ化します。もちろん、bowerとgulp.jsを使用することもできます。 gulp.js用のWireeppプラグイン このような組み合わせの実装「アクティブ」ページへの挿入linkタグ–ただし、これにはgulp.jsなどのツールが必要です。

開発フェーズの後、展開フェーズで解決する必要のあるいくつかの明らかな問題を見てみましょう。

  1. CSSファイルのマージ、圧縮など。
  2. JavaScriptファイルのマージ、圧縮、難読化など。

ただし、これはjspmとSystemJSの使用法の正式な紹介です。

jspm ＃

前述のように、jspmはブラウザー側のパッケージマネージャーです。

jspmをインストールします

npm install jspm -g

ディレクトリを初期化する

jspmをインストールすると、コマンドラインにjspmが表示されます。jspmコマンドが使用可能です。

ディレクトリを作成して実行jspm init開発環境は、次のディレクトリで初期化できます。

Package.json file does not exist, create it? [yes]: Would you like jspm to prefix the jspm package.json properties under jspm? [yes]: Enter server baseURL (public folder path) [.]: Enter jspm packages folder [./jspm_packages]: Enter config file path [./config.js]: Configuration file config.js doesn't exist, create it? [yes]: Enter client baseURL (public folder URL) [/]: Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]:

あなたがそれを使用した場合 ヨーマン そのようなヒントに非常に精通している必要があるツールのクラス。

サードパーティのライブラリをインストールする

たとえば、jQueryをインストールするには：

jspm install jquery

このコマンドは、github：components / jqueryからダウンロードを読み取ります。

npmからダウンロードしてインストールすることもできます。

jspm install npm:jquery

HTMLファイルを作成する

次のようにindex.htmlファイルを作成します。

System.import('app')

最初に引用する必要がありますjspm_packages/system.jsこれはjspmが提供するユニバーサルローダーです。その後config.jsインストールしたファイル、さまざまなパッケージ、依存関係などはこのファイルに保持され、その後、グローバルSystem.importを使用します。 index.htmlと同じディレクトリにあるapp.jsファイルを実行します。

app.jsファイルでは、ES6構文を使用します。

import $ from 'jquery' $(function() { console.log($) })

index.htmlでBootstrapを使用し、次にpass jspmを使用するとします。インストール：

jspm install bootstrap

次に、app.jsファイルを次のように変更します。

import bootstrap from 'bootstrap' $(function() { console.log($) })

ありませんimport jQuery、これはjspmがブートストラップの依存関係を維持し、手動でimportすることなくjQueryを自動的にロードするためです。

import bootstrap from 'bootstrap' 1行は、Bootstrapがロードされたjsモジュールです。では、BootstrapのCSS部分はどのように読み込まれますか？使用する必要があります JspmCSSプラグイン 。

まず、jspmcssプラグインをインストールします。

jspm install css

次に、app.jsに行を追加します。

import 'bootstrap/css/bootstrap.css!'

！ これがプラグインによって処理されることを示します。

この時点で、ローカルサーバーでindex.htmlファイルを開いた場合は、ブラウザの開発者ツールを使用して以下を表示します。

[resp_image id = ’16028′ caption =”]

うわー、リクエストはもう少しです–しかし、これは単なる開発段階です。

パッケージ化されたJavaScript

最後に、JavaScriptのパッケージ化について話しました。

jspmでは、jsファイルのパッケージ化は非常に簡単です。 jsエントリが1つしかない場合は、次のように実行するとします。

jspm bundle-sfx app build.js --minify

CSSファイルを含むすべての必要なjsファイルをbuild.jsファイルにパッケージ化できます。

次に、index.htmlファイルのスクリプト部分を次のように変更します。

index.htmlページを開くと、index.htmlとbuild.jsのリクエストは2つだけです。

パッケージCSS

前のステップでは、CSSファイルをjsにパッケージ化しましたが、これはほとんどの人が望む結果ではない可能性があります。

定義を渡すことができます Config.jsファイル この動作を変更します。

config.jsファイルを開いて追加seperateCSS: true：

System.config({ 'baseURL': '/', 'separateCSS': true })

再度実行jspm bundle-sfx app build.js --minify build.jsとbuild.cssがindex.html兄弟ディレクトリに生成され、build.cssファイルがindex.htmlで参照されます。