seajs使用点滴

2826 ワード

JavaScriptはスクリプト言語として、自身はとても簡素で、発明の最初はモジュールの状況を全く考慮していませんでした.そこで、今日検討したモジュール化はJavaScriptにおける依存、衝突、ひいてはコードがどのようにパッケージされているかを解決するものである.
ロードモジュール:
seajs.use()
同期ローディングrequire()に対応して、もう一つは非同期のrequire.async()です.
モジュールを作成:
/* 
        seaJs    
         
*/  
define(function(require, exports, module) {  
    function tab () {  
        alert(123)  
    }  
});  
衝突防止:
中間部品を導入するmiddleware.js:
define(function(require, exports, module) {
	var provide= {};
	exports.provide = function(id, obj){
		provide[id] = obj;
	}
	exports.get = function(id){
		return provide[id];
	}
});
その他:
Common対応の場合、nodejsにseajsを導入しないが、define()の実装を提供してエラーを防ぐ:
// Hook into commonJS module systems
if (typeof module !== 'undefined' && "exports" in module) {
  var define = function (fn){
    fn(null, exports, module);
  }
}
圧縮と混淆コード
Uglify-jsをインストールします
npm install uglify-js -g
圧縮:
uglifyjs inet.js -o inet-min.js
混淆:
uglifyjs inet.js -m -o inet.min.js
は、あるディレクトリを圧縮する処理を行う.まず、複数のフォルダをコピーして、BATの中のJSFODERを修正します.
@echo off
::     JS      ,                 JS
SET JSFOLDER=C:\temp\src
echo     JS  
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo      %%~a ...
    uglifyjs %%~fa -o %%~fa --source-map=%%~fa.map --source-map-url=%%~na.js.map --source-map-root=http://localhost/bigfoot/src --prefix=2
)
echo   !
pause & exit
cd..
現在のsrcフォルダではなく、このバッチはsrcを上書きします.
パラメータの説明は以下の通りです.
  • --source-mapは、mapファイルが保存している物理的な位置であり、通常は同じディレクトリに保存されています.「%%~f a」はDOSバッチ処理の特殊変数で、fは完全なディスクパスを表し、aは変数名です.
  • --source-map-urlは、jsの情報を復元したいとブラウザに伝え、圧縮後のjsファイルの最後の行を定義します.「%%~n a」はDOSバッチ処理の特殊変数で、nはファイル名のみを読み出すことを示し、aは変数名である.
  • --source-map-rootはmapファイルのルートディレクトリで、一般的にmapファイルの最後に出ると定義されています.この値は非圧縮前のjsファイルのディレクトリを決定しています.一般的に、この値はマシンを開発することを指すべきで、オンラインに置いてもいいですが、これはあなたが苦労して書いたjsを暴露するのと同じです.
  • --source-map-rootとmapファイルのsource[]は、非圧縮前のjsの最終位置を構成しています.したがって、prefixパラメータは、ディレクトリプレフィックスを除去するものである.これらのプレフィックスは通常、マシン上の仮想ディレクトリやバッチ処理のファイルディレクトリを開発し、オンラインの最終ディレクトリと変換します.prefix=2は、前の2つのレベルを削除するディレクトリです.prefixパラメータについて、glifyはwin 32のbugを持っています.詳細は以下の通りです.
    Windowsユーザーは注意してください!!
    uglify-js(私の現在のバージョンv 2.4.15)は、linuxシステムファイルのセパレータしか認識できません.Win 32の「\」を識別できません.だから、あなたが-p/perfixパラメータに入った時、無効になります.soures出力は「?」で、
    解决方法は吸収パラメータのソースコードを修正することです.
    C:\Users\あなたのユーザ名ディレクトリ\Appdata\Romingpmode_modules\uglify-js\bin\uglifyjs
    257行目は、次のように変更されました.
    // replace          
    file = file.replace(/^(\\|\/)+/, "").split(/\/+|\\+/).slice(ARGS.p).join("/");
    で、Windowの区切りが認識されます.
    参考:http://www.zhangxinxu.com/wordpress/2013/01/uglifyjs-compress-js/