SPM v.1.1.2 With SeaJS
10421 ワード
SPM v1.1.2使用マニュアル
1.SPM用途
SeaJSはモジュール化された開発メカニズムを提供し、コード開発が完了した後、製品発表に関するいくつかの操作を行う必要があります.これらはSPMで行うことができ、SPMはモジュールのインストール、圧縮、パッケージ配置などの機能を提供します.
2.SPM取付
1.nodejs公式サイトから最新バージョンのnodeをダウンロードします.ここでnode-0.8.14を例に、Windowsバージョンのインストールパッケージを直接ダウンロードすればいいです.デフォルトでは「C:Program Filesodejs」にインストールされ、pathに自動的に追加され、バージョンを確認します.
C:\Documents and Settings\Administrator>node -v
v0.8.14
2.新版のnodeはnpmを持っています.ここではnpmでspmをインストールします.次に、インストールバージョン1.1.2を指定します.現在は最新バージョンです.バージョン番号を指定しない場合は、デフォルトで最新バージョンがインストールされます.インストールパッケージの大きさは11.8 Mで、ネットの速度によって、辛抱強く待ってください.
C:\Documents and Settings\Administrator>npm install [email protected] -g
npm http GET https://registry.npmjs.org/spm/1.1.2
npm http 200 https://registry.npmjs.org/spm/1.1.2
npm http GET https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http 200 https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http GET https://registry.npmjs.org/spm-env
npm http GET https://registry.npmjs.org/csslint
npm http GET https://registry.npmjs.org/async
...
spmをダウンロードすると、圧縮パッケージのpackageに従います.jsonは関連する依存パッケージを自動的にインストールし、最後に以下のインタフェースが表示されます.
C:\Documents and Settings\Administrator\Application Data
pm\spm -> C:\Documents and Settings\Administrator\Application
Data
pm
ode_modules\spm\bin\spm
[email protected] C:\Documents and Settings\Administrator\Application Data
pm
ode_modules\spm
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected].
0, [email protected], [email protected], [email protected])
3.インストール後にバージョンを確認する
C:\Documents and Settings\Administrator>spm -v
v1.1.2
この方法でインストールが遅い場合はgitソースコードの後にインストールできます.詳細は公式ドキュメントを参照してください.
今回のテストでは、Widnows XPオペレーティングシステムを使用しています.以下の例では、v 1を使用しています.1.2バージョンは、バージョンによって異なる場合がありますので、ご注意ください.
3.SPMモジュールの検索とインストール
まず、フロントエンドで開発されたすべてのファイルを保存するために、Cディスクルートディレクトリにassetsディレクトリを作成します.まずspmを使用して開発に必要なモジュールをダウンロードし、spmのデフォルトのモジュールサーバはhttp://modules.spmjs.org/. 内部ネットワークにモジュールサーバを独自に構築することもできますが、ここでは詳しくは説明しません.
まずspm searchコマンドを使用して、モジュールサーバでインストール可能なモジュールのバージョンを検索できます.
C:\assets>spm search seajs
C:\assets>spm search jquery
C:\assets>spm search mustache // mustache
...
versions: //
0.4.0:
- mustache.js
0.5.0:
- mustache.js
root: gallery //
name: mustache
tag:
type:
C:\assets>spm install [email protected] // seajs
C:\assets>spm install gallery.jquery // ， jquery
C:\assets>spm install gallery.mustache // ， mustache
最近モジュールサーバのディレクトリ構造が調整され、jqueryパスのインストールがgalleryになった.jquery,mustacheインストールパスはgallery.mustache
上のモジュールインストールコマンドを実行すると、assetsディレクトリにsea-modulesディレクトリが多くなり、seajsとダウンロードしたモジュールがあります.
4.SPMテストディレクトリとファイル
ここで設定した開発ディレクトリ全体の構造は、次のとおりです.
C:\assets>tree /f
PATH
4421-1F56
C:. // C:\assets，
├─sea-modules // spm
│ ├─seajs
│ │ └─1.2.1
│ │ plugin-less.js
│ │ plugin-base.js //
│ │ plugin-combo.js
│ │ plugin-debug.js
│ │ plugin-i18n.js // ，
│ │ plugin-json.js
│ │ plugin-coffee.js
│ │ plugin-reload.js
│ │ plugin-storage.js
│ │ plugin-text.js // ，
│ │ sea-debug.js
│ │ sea.js
│ │ package.json
│ └─gallery
│ ├─jquery //
│ │ └─1.8.3
│ │ │ jquery-debug.js
│ │ │ jquery.js
│ │ │ package.json
│ │ │
│ │ └─gallery
│ │ jquery.tgz
│ │
│ └─mustache //
│ └─0.5.0
│ mustache-debug.js
│ mustache.js
│ package.json
│
└─apps ， src test ，
│ spm ， 。
└─hello html spm build package.json。
│ index1.html js 。
│ index_module.html js 。
│ package.json spm build ， ant build.xml。
│
└─js ， hello-seajs ， 。
│ main.js
│ spinning.js
│
├─tpl ( ）
│ userinfo.tpl
│
└─i18n （ ）
│ lang.js
│
└─zh-cn
lang.js
上記のビジネス開発が完了したと仮定すると、jsディレクトリの下にあるすべてのファイルをsea-moduleにパッケージ化し、jsファイルを圧縮することが任務です.次にindexを変更します.htmlのパスのurlは、配置されたモジュールを参照できます.
注意i 18 nのlangファイルやテンプレートファイルはブラウザのローカル読み出しをサポートしていません.nginxやtomcatなどのwebサーバに配備してアクセスする必要があります.
// nginx, ，nginx/conf/nginx.conf server
server {
listen 80; //
server_name localhost; //
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
autoindex on; //
root c:/assets; //
index index.html index.htm; //
autoindex_exact_size on; //
autoindex_localtime on; //
}
}
5.SPMパッケージの導入
配置についてはpackageに触れないわけにはいかない.jsonファイル、以下はこの例のパッケージプロファイルです.
{
"name": "hello-seajs",
"version": "1.0.0",
"dependencies": {
"jquery": "gallery/jquery/1.8.2/jquery"，
},
"root": "apps",
"output": {
"main.js": ".",
"i18n": "i18n/**/*.js",
"tpl": "tpl/**/*.tpl"
},
"spmConfig": {
"build": {
"src": "js",
"to": "../../sea-modules/{{root}}/{{name}}/{{version}}"
}
}
}
ここでspmConfigはコマンドに関するパラメータを作成するために用いられ,spm buildのsrcとtoの2つのパラメータが上述したように作成される.srcはjavascriptコードが存在するパスを表します.toは、パッケージ化後にどこにコピーするかを示します.上で定義したroot,name,versionは、パッケージを構築するための完全なパスに参照されます.
outputは出力の結果と形式を定義します.具体的なoutputパラメータの解釈はhttps://github.com/spmjs/spm/wiki/package.json-:-output.ここではjsディレクトリファイルがmain,jsに統合され圧縮されていることを示します.他のi 18 nファイルとtplファイルは、過去にコピーする必要があります.
dependenciesは、ビジネスコードに依存するモジュールを示し、パッケージング中に依存置換を行います.ここはseajsに相当する.configのaliasの定義は、コピーするときに文字の一重引用符を二重引用符に変更することに注意してください.注意:jsonファイルのkeyとvalueは二重引用符です.
より多くのパラメータはspm help buildを参照できます.
C:\assets>spm help build
BUILD CMD MODULE
usage: spm build [options]
Options:
--only only execute current phrase plugin.
--global-config use user custom config.
--base set base directory. [string] [default: "C:\\assets"]
--src set src directory. [string]
--dist set dist directory. [string]
--source set source server.
--version set module version. [string]
--source-files set directory which need to compile. [default: null]
--throwErrorOnDepNotFound throw error when dependencies not found. [boolean] [default: false]
--with-debug add debug file. [string] [default: "debug"]
--timeout Set request service time delay [default: 6000]
--verbose, -v Show more verbose information. [default: 2]
--encoding Set file encoding! [default: "utf8"]
パッケージに切り替えましたjsonのディレクトリはspm buildを実行し、spmはそのディレクトリの下のpackageを読み出す.jsonファイル.
C:\assets\apps\hello>spm build
build中にNot Found i 18 nがあります!lang dependency!の警告を無視してください.実際にコードが実行されるとseajsにいます.configでpreloadを構成したプラグインは、影響しません.buildが終了するとsea-modules/apps/hello/1.0.0/で対応するコードファイルが生成され、ビジネスjsファイルがmainにマージされる.js.
C:\assets\sea-modules>tree apps /f
上記のコマンドを実行すると、buildの出力結果を表示できます.
C:\ASSETS\SEA-MODULES\APPS
└─hello
└─1.0.0
│ main.js //spinning.js main.js 。
│ main-debug.js // js ， 。
│
├─i18n
│ │ lang.js
│ │
│ └─zh-cn
│ lang.js
│
└─tpl
userinfo.tpl
具体的なリファレンスファイルの変更は、ChromeデバッガのSourceウィンドウからリファレンスファイルのパスを表示できます.まとめ:ここではspmツールの簡単な使用例にすぎませんが、より多くの使用方法は関連ドキュメントを参照してください.
このケースのソースコードは添付ファイルを参照して、webserverに配備してテストしてください.