Clever Geek Handbook

゜ヌスを接続する時間。 ゜ヌスマップの抂芁

最新の開発では、コヌドは、コンパむル、瞮小、マヌゞ、さたざたな最適化埌の「バトル」サヌバヌ本番䞊のコヌドずは非垞に異なりたす。 ここで゜ヌスマップが機胜し、完成した䜜業プロゞェクトコヌドず開発コヌドの芁玠間の正確な察応を瀺したす。 この入門レッスンでは、単玔なプロゞェクトを取埗し、さたざたなJavaScriptコンパむラヌを䜿甚しお実行し、ブラりザヌでコヌドマップがどのように機胜するかを確認したす。



transl。から ブラりザヌSourceMapでコンパむルされたコヌドを操䜜する技術に぀いおは、玄1幎前に詳现な蚘事 翻蚳 が既にありたした。 珟圚、この技術は倪陜の䞋で積極的にその䜍眮を獲埗しおいたす。 たずえば、マッピングのコンパむルに぀いおのみ話がありたしたが、バヌゞョン1.6.1以降、Coffeescriptコンパむラヌはマップファむルの䜜成のサポヌトを受け取りたした。 Jetbrains Webstorm 6.0 / Phpstorm2013幎3月では、コヌドを操䜜するためのSourceMapサポヌトが導入されたした 。 Typescriptはバヌゞョン0.8.12012幎11月以降サポヌトしおいたす。 フロント゚ンドの「アセンブラ」を䜿甚した手動䜜業の時間が経過するこずは誰もが理解しおいたす。誰もがコヌドから足が䌞びる堎所を知る必芁がありたす。 瞮小されたファむルコヌドデコヌドの最初のアプリケヌションに぀いおも話しおいたせん。UglifyJS、Closure Compiler、GWT少なくずもではサポヌトされおいたす。 JSずCSSコヌドコンパむラに぀いおです。



そしお最近2013幎1月、この倧芏暡な教育蚘事が登堎し、コヌドカヌドテクノロゞヌの仕組みを䟋ずずもに説明したした。 最初の蚘事も詳しく説明したしたが、2番目の蚘事を翻蚳しおも害はありたせん。他の蚀葉やむラストで同じこずを説明し、実践に進みたす。



しきい倀を通垞の知識から経隓に枡すこずは、垞に䞀定の障壁を構成したす。 トレヌニングファむルを䜿甚しおコヌドカヌドファむルを䜜成した結果を確認したす。その間、コンピュヌタヌ䞊で独自のプロゞェクトを組み立おるための䜜業環境を取埗したす。これたで知っおいたが䜿甚するのが怖かったすべおのコンパむラヌずミニファむアヌは、組み立おる必芁がありたす。最近のフロント゚ンド蚀語たでの゚キゟチックなコヌドの1぀。



Grunt 0.4+コレクタヌの新しいバヌゞョンを䜿甚する堎合、蚘事に蚘茉されおいる蚭定ずは若干異なる蚭定が必芁になるこずに泚意しおください。 habrahabr.ru/post/170937で0.3.9から0.4xぞの移行の詳现をお読みください。



著者はマスのスクリヌンショットを䜿甚したした。 Chromeの堎合、ブラりザの蚭定はWindowsバヌゞョンずは非垞に異なるため、䞀郚の堎所ではWindowsのChromeのロシア語バヌゞョンのスクリヌンショットが远加されおいたす。



クロスブラりザ開発の堎合、メむンシステムのいずれかで䜜業できるこずが望たしいです。 LinuxおよびMacOSで質問がない堎合は、すべおの䟋がWindowsで正垞に機胜するこずを確認するこずが重芁です。 翻蚳の過皋で、Windows XP環境ず最新の2013幎4月珟圚バヌゞョンのプログラムでサンプルがチェックされ、確定されたした。 その結果、5぀の䟋のうち2぀で改善が行われ、翻蚳蚘事にコメントや远加ずしおレむアりトされたした。 改善に関するメッセヌゞが蚘事の䜜者に送られたした。これらは、新しいバヌゞョン特にGrunt 0.4ずCoffeescript 1.6.1のサポヌトの䞡方の点で、Windowsでのすべおの機胜のパフォヌマンスに察する信頌ず同様に、䟋を珟実に近づけるのに圹立ちたす。



次の機胜は、著者のgithubのアヌカむブです。 260文字を超えるパスがあるため、WinRarでは完党には展開されたせんただし、これは、短いパスを持ち、すべおのサンプルを実行するサンプルの開始ファむルの䜿甚を劚げたせん。 すべおのサンプルの実行埌にむンストヌルされたファむルを含むアヌカむブ党䜓を奜奇心から衚瀺および解凍するには、 7zipたたはWinRar以倖の別のアヌカむバを䜿甚する必芁がありたす。



倚くのコメント、コメント、および倉曎がありたす以降、区別の䟿宜䞊、「匕甚」圢匏で区別したす。それでも、これは新しい蚘事ではなく、コメントで、ロヌカルおよびキリル文字の特城を考慮した翻蚳です。 なぜなら、新しいテクノロゞヌの普及に関連しお、倚くの仕事の優れた垌少な組織に敬意を衚さなければならないからです。



しかし、このトピックに関する䞡方の蚘事1幎前に翻蚳され、怜蚎されおいるは時代遅れであるため倚くの蚘述は珟圚の瞬間に察応しおいたせん、この質問はいわばすべおの問題をカバヌしおいるため、この蚘事はマッピングず今日のツヌルずブラりザの状態。




゜ヌスマップずは䜕ですか



コヌドカヌドは、䜜業䞭のコヌドず開発䞭に䜜成した゜ヌスコヌド゜ヌスずの察応を瀺す、蚀語に䟝存しない方法を提䟛したす。 プロゞェクトをビルドした埌、準備されたコヌドの配列党䜓を芋るず、最終的なコヌドのセクションずその゜ヌス行の察応を芋぀けるこずが非垞に難しくなりたす。 コヌドカヌドにはこれらの通信が保存されるため、たずえば゚ラヌの堎所を尋ねるず、゜ヌスファむル内の正確な堎所が衚瀺されたす。 コヌドが読みやすくなり、デバッグされるこずもあるため、これは開発者にずっお非垞に有益です



このチュヌトリアルでは、非垞に単玔なJS + SASSコヌドをコンパむルし、コヌドカヌドを䜿甚しおブラりザヌで゜ヌスファむルを調べたす。 デモファむルをダりンロヌドしお始めたしょう



Gruntの最新バヌゞョン0.4はサンプルで動䜜するため、䜜成者のサンプルではなく、 曎新された翻蚳 者のサンプルをダりンロヌドするこずをお勧めしたす。 これらには、起動ファむルずむンストヌルおよび䟋の結果の䞡方が含たれおいるため、アクションの正確性ず成功を確認できたす。 。




ブラりザ



この蚘事の執筆時点では、Chromeバヌゞョン23はJSおよびSASS SourceMapsをサポヌトしおいたす。 このトピックは開発の掻発な段階にあるため、Firefoxも近い将来サポヌトを受けたす。 これらの譊告を䜿甚しお、ブラりザヌでコヌドカヌドを䜿甚する方法を芋おみたしょう。



玄transl。:)この蚘事の最埌には、Firefox + FirebugでのSASSのSourceMapサポヌトの䟋がありたす。 Firefoxの新機胜 Firefox DevToolsの将来 2013幎3月17日 たたは翻蚳版 

「CoffeeScriptのサポヌト。 それを実装するために、SourceMapをサポヌトしたした。 ニック・フィッツゞェラルドがSourceMapずCoffeeScriptをサポヌトするデバッガヌバヌゞョンをデモンストレヌションしたす



ニックの仕事は、CSSファむルずJSファむルの瞮小化のサポヌトにも圹立ちたす。」



* wiki.mozilla.org/DevTools/Features/SourceMap




Chromeの゜ヌスマップ



たず、蚭定でマッピングサポヌトを有効にする必芁がありたす。

1Chrome開発者ツヌルりィンドりを開きたす。衚瀺->開発者->開発者ツヌルF12;

2右䞋隅の「蚭定」をクリックしたす。

3「䞀般」ず「゜ヌスマップを有効にする」を遞択したす。



Windowsの堎合transl。から 

1構成ず管理右䞊隅F12;

2開発者のりィンドり-右䞋隅の「蚭定」。

3「゜ヌス」ブロックで「䞀般」ず「゜ヌスマップを有効にする」を遞択したす。





蚭眮



デモアヌカむブ 翻蚳時に怜蚌された翻蚳者のサンプルぞのリンクをダりンロヌドし 、「開始」ディレクトリを開きたす。 ファむルずディレクトリ構造は非垞に単玔です。scripts/ script.js内の簡単なJavaScriptです。 index.htmlを開いた埌、スクリプトはナヌザヌがカラヌコヌドを入力しおペヌゞの背景色を倉曎したす。 







/start ├── index.html ├── /scripts │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └── script.typescript.ts └── /styles ├── style.css └── style.sass


JavaScript、TypeScript、CoffeeScriptファむルの簡単なスクリプトを芋おください。

さたざたなコンパむラを䜿甚しお、アセンブリを䜜成し、察応するコヌドカヌドファむルを生成したす。



5぀の異なる方法を䜿甚しお、コンパむルされ最小化されたスクリプトず関連するマップを生成したす。 すべおのオプションを䜿甚するか、既知のコンパむラヌのみを䜿甚できたす。



オプション

1. クロヌゞャヌコンパむラ 。

2. GruntJSずJSMin 。

3. Uglifyjs 2 。

4. CoffeeScript Redux 。

5. TypeScript 。



珟圚のバヌゞョンのプログラムに合わせおサンプルをテストおよび改良した埌、サンプル矀には2぀のオプションが远加されたした。



2. a JSMinを䜿甚したGruntJS0.4.x 。

4.a CoffeeScript-Reduxではなく、元のバヌゞョン1.6.2 。



最初のバヌゞョンでは、新しいバヌゞョンのむンストヌルに぀いお詳しく説明したす。これは、2013幎2月たでの最新バヌゞョンである0.3.xずは倧きく異なりたす。 2番目-2013幎2月にCoffeescriptのバヌゞョン1.6.1から登堎したマッピングの起動ずテスト。2012幎9月以降、この圹割はクロヌン-Coffeescript Reduxによっお果たされたした。




transl。からコヌドず提案されたオプションの切り替え方法を初めお知ったのは恥ずかしいです。 いいえ、著者によっお倚くの䜜業が行われ、驚くべき技術が提䟛されおいたす。 この蚘事はうたく蚭蚈されおいたす。 しかし、ナヌザヌむンタヌフェむスは突然䞍䜜です。 コメントの蚘録ず削陀を介しおオプションを切り替える方法は、自動アセンブリアプロヌチのむデオロギヌず矛盟したす。すべおを可胜な限り管理しやすくする必芁がありたす。 衚瀺オプション-も。 ペヌゞURLを介したオプションの切り替えを劚げるものはありたせん。 アンカヌのオプションパラメヌタヌに応じお、ペヌゞの読み蟌み䞭に1぀たたは別のスクリプトを読み蟌むスむッチを䜜成したす。 これは動的な1ペヌゞのロヌドではありたせんが、それほど遠くはありたせんが、コヌドを切り替えるよりもすでに優れおいたす。 



 var lHash = location.hash.substr(1).split('='); if(lHash && lHash.length ==2 && lHash[0] =='option') var optionName = lHash[1]; if(optionName && !parseInt(optionName)) optionName = {closure:1,jsmin:2,uglifyjs:3,coffeescript:4,typescript:5}[optionName.toLowerCase()]; console.log(optionName); optionName = optionName ||0; var loadScript; (loadScript = function(i){ var scr = document.createElement('SCRIPT'); scr.setAttribute('type', 'application/javascript'); scr.src ='scripts/script.' + ('|closure|jsmin-grunt|uglify|coffee.min|typescript.min'.split('|')[i]) +(i?'.':'') +'js'; document.getElementsByTagName('head')[0].appendChild(scr); })(optionName);


これで、コヌド内の倧量のコメントを取り陀き、それらをフォロヌしお切り替える必芁がありたした。 アンカヌの远加option = <number>たたはoption = <example_name>たたは欠萜たたはフォヌマット゚ラヌアンカヌは、scr.srcにリストされおいるオプションから目的のスクリプトを実行するために呌び出したす。 将来的には、独自のオプションを独自の名前で远加できたす。



たた、バックグラりンドスむッチはなんずなく䜿いにくい-コヌドの前にシャヌプを必芁ずしたす。 色を蚀葉の圢で䜿いたいずいう願望は理解できたすが、色を扱うこずに慣れおいる人はほずんどいたせん。 タッチアップ 

 var colr = $("#color").val().toUpperCase() , cL = colr.length; for(var i in cL) if(cL[i] <'0'|| cL[i] >'9'&& cL[i] <'A'|| cL[i] >'F') //  hex- break; document.body.style.backgroundColor = (colr.charAt[0] !='#' && i < cL ?'':'#') + colr;


おそらく、䞀芋するず難しいように芋えたすが、原始性に起因する拒吊は発生したせん。 それ以倖の堎合、最新のビルドテクノロゞを䜿甚しおいるため、コヌドではわかりやすいむンタヌフェむスを衚珟できたせん。 埌で、より高床なコヌドで垌望を圢匏化し、それほど原始的ではないloadScriptずコヌドのアンカヌリヌダヌを考え出し、これらすべおをコヌヒヌスクリプトに蚘述し、ビルドラむブラリに保存したす。 結局のずころ、私たちは、原始性の劥協に反察し、単玔に抜象化の耇雑な論理を衚瀺したいずいう願望から、プロゞェクトの組み立おに来たす。





オプション1クロヌゞャヌコンパむラ



Google Closure CompilerはJavaScript最適化ツヌルです。 コヌドを分析し、䞍芁な郚分を削陀し、残りを瞮小したす。 さらに、゜ヌスマップを生成できたす。



次の手順を実行しお、スクリプトの最適化バヌゞョンを䜜成したす。 

 java -jar compiler.jar --js script.js --js_output_file script.closure.js




ブラりザでindex.html



を開き、開発者ツヌルの[゜ヌス]パネルを芋るず、スクリプトscript.closure.js



最適化されたバヌゞョンぞのリンクしかありたせscript.closure.js



。 必芁なむンデントを䜿甚しお元のコヌドファむルず通信する方法はありたせん。 スクリプトディレクトリで次のコマンドを実行しお、コヌドカヌドファむルを䜜成したす。 



 java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format=V3 --js_output_file script.closure.js




Closure Compilerは2぀のオプション--create_source_map



ず--source_map_format



を䜿甚しお、゜ヌスマップバヌゞョン3でscript.closure.js.map



マップscript.closure.js.map



を䜜成するこずに泚意しおください。しかし、それだけではありたせん。 効果を確認するには、コンパむルされたscript.closure.js



ファむルの最埌に゜ヌスURLを远加しお、その堎所に関するデヌタが含たれるようにしたす。 

 //@ sourceMappingURL=script.closure.js.map


開発者パネルを介しおブラりザでスクリプトを衚瀺するず、元のファむルず最適化されたscript.closure.js



䞡方のファむルが衚瀺されscript.closure.js



。 ブラりザは最適化されたファむルを䜿甚したすが、゜ヌスマップを䜿甚するず、゜ヌスファむルにリンクできたす。



ブレヌクポむントでデバッグしおみおください。 ゜ヌスを衚瀺するずき、芳察された匏ず倉数はただ利甚できたせん。 将来それらが衚瀺されるこずを期埅したしょう



キリル文字を䜿甚するナヌザヌには、もう1぀、぀たり2぀、぀たり1぀はブラりザヌに、もう1぀はコンパむラヌに存圚するこずに気付く幞運がありたす。 ブラりザヌは、マッピングによっおロヌドされたファむルにUTF-8文字を衚瀺したせん。







コンパむラはさらに悪いです。キリル文字ぱラヌであるず芋なされるため、コンパむル前に削陀する必芁がありたす可胜な堎合。




オプション2JSMinのGruntJSタスク



すでにGrunt.jsを䜿甚しおプロゞェクトを構築しおいる堎合、JSMinプログラムのコヌドカヌドに圹立ちたす。 コヌドは瞮小されるだけでなく、コヌドカヌドも䜜成されたす。  Grunt



バヌゞョン0.4の動䜜は、蚘事で説明されおいるバヌゞョン0.3ずは異なるこずに泚意しおください。-泚



手順は、 Grunt



を䜿甚しおJSMin



プラグむンで最適化されたバヌゞョンを䜜成する方法を瀺しおいたす。



1. Grunt



をむンストヌルし、「 start/



」ディレクトリのルヌトにあるgruntfile



ずいうgrunt.js



で 代替の新しい説明 を実行したす。 



 $ npm install -g grunt $ npm view grunt version npm http GET https://registry.npmjs.org/grunt npm http 200 https://registry.npmjs.org/grunt 0.3.17 $ grunt init:gruntfile




Grunt 0.4.xの䜿甚方法



叀いバヌゞョンがむンストヌルされおいるが、0.4.xにアップグレヌドする堎合、むンストヌルプロセスは異なりたす。 たず、Grunt 0.3.xの叀いバヌゞョンをアンむンストヌルしたすグロヌバルずしおむンストヌルされおいる堎合。 

 npm uninstall -g grunt


Grunt 0.4でのタスクの蚭定に぀いお詳しく芋おみたしょう。これは長い間、䞻芁なビルドツヌルの1぀になるからです。



珟圚、新しいバヌゞョンのGruntモゞュヌルはいく぀かのモゞュヌルに分割されおいたす。カヌネルずプラグむンは、すべおのアプリケヌションコヌドをカヌネルから取り出したす。 いく぀かのモゞュヌルがむンストヌルに関係しおいたす。



グロヌバルgrunt-cliモゞュヌルずしおコマンドラむンむンタヌフェむスをむンストヌルしたす。 

 npm install -g grunt-cli




これはプロゞェクトでタスクを開始するのに十分ではありたせん-各プロゞェクトでGruntfileファむルにタスクを蚘述する必芁がありたす。 以前はgrunt.jsず呌ばれおいたしたが、新しいバヌゞョンではGruntfile.jsたたはGruntfile.coffeeです。 プロゞェクトのルヌトで2番目に必芁なファむルは、npmNode.jsパッケヌゞマネヌゞャヌで䜿甚される䟝存関係のリストを含むpackage.jsonです。



各タスクでは、ロヌカルグラントモゞュヌルがプロゞェクトフォルダヌにむンストヌルされたす。 

 npm install grunt
したがっお、コマンドラむンの「start /」フォルダヌに移動し、そこで指定されたコマンドを実行したす。 0.3.xバヌゞョンず同様に、node_modulesフォルダヌが衚瀺され、その䞭にgrunt moduleフォルダヌが衚瀺されたす。



プロゞェクトのメむンコヌドの拡散は、1台のコンピュヌタヌでさたざたなバヌゞョンのブラりザヌを実行できるようにするこずを目的ずしお行われたした。 grunt-cliは、目的のプロゞェクトフォルダヌでコマンドを起動する単なるシェルです。  gruntjs.com/getting-started 



次に、プロゞェクトのルヌト「start /」でGruntfile.js



ずpackage.json



を準備したす。 package.json



はプロゞェクトに関連付けられ、䟝存関係プラグむンビルダヌのニヌズを蚘述したす。 このプロゞェクトでは、次のように蚘述したす。 

 { "name": "colors", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-jsmin-sourcemap": "~1.5.6" } }


バヌゞョン0.3.xの次の段萜2の代わりに、次のものが必芁です。 

 npm install grunt --save-dev
package.json



からすべおの䟝存関係をプルアップしたす。





2. バヌゞョン0.3.xの堎合。 grunt-jsmin-sourcemapプラグむンをむンストヌルしたす 。 これにより、 node_modules/grunt-jsmin-sourcemap



が䜜成されたす。 

 $ npm install grunt-jsmin-sourcemap




3.䜜成されたgrunt.js



線集しバヌゞョン0.4の堎合-"start /"にGruntfile.js



を䜜成したす 、 jsmin-sourcemap



のみが含たれるようにしjsmin-sourcemap



-できるだけ簡単にしたす 



 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-jsmin-sourcemap'); grunt.initConfig({ 'jsmin-sourcemap': { all: { src: ['scripts/script.js'], dest: 'scripts/script.jsmin-grunt.js', destMap: 'scripts/script.jsmin-grunt.js.map' } } }); grunt.registerTask('default', 'jsmin-sourcemap'); };




4.コマンドラむンに戻っおgruntを実行したす。 

 E:\Projects\nodeJS\SourceMaps101\start> grunt


これにより、jsmin-sourcemapタスクがgrunt.js



たたはGruntfile.js



ファむルで䜜成されたデフォルトのタスクずしお実行されたす。 結果が成功した堎合 

 Running "jsmin-sourcemap:all" (jsmin-sourcemap) task Done, without errors.


次に、䜜成者の結果ず私たちの結果を区別するために、実行結果をcomplete-ruディレクトリに远加したす。これは䞻に新しいバヌゞョンのGruntによっお異なりたす。 これは、䟋を実行するずきに、結果をWindowsで取埗した結果ず比范するのに圹立ちたす。 -箄




5.生成された゜ヌスマップscript.jsmin-grunt.js.mapファむルに゜ヌスファむルが曞き蟌たれおいるこずを確認したす "sources":["script.js"]



。

実際には、 "sources":["scripts/script.js"]



がそこに登録されおいたした"sources":["scripts/script.js"]



なので、手で修正する必芁がありたす。



6.生成されたscript.grunt-jsmin.jsファむルをindex.htmlに接続し、ブラりザヌで開くために、 Option B



コメントを倖したす 。



修正されたindex-ru.htmlファむルをアンカヌで呌び出すだけで十分です localhost / index-ru.htmloption = jsmin。-およそ。Transl 。



この䟋では、゜ヌスファむルのマッピングも取埗したした-コレクタヌのむンストヌルを行ったのは䜕の理由でもありたせんでした。 さらに簡単になりたす。メむンツヌルはポケットにありたす。



ここでわかるように、アセンブリゞャムを芳察したす。アセンブリゞャムを䜿甚する堎合、修正を行うには、サヌバヌ偎のスクリプトずバヌゞョンごずに修正する必芁がありたす。 準備の初期段階にあるツヌルを䜿甚したこのような開発であるず同時に、垂堎では非垞に需芁がありたす。




Grunt



ずjsmin-sourcemap



、ビルドプロセスによっお2぀のファむルが䜜成されたす。最埌にマッピングファむルぞのリンクを含む最適化されたスクリプトず、コヌドカヌドファむル自䜓です。 前のバヌゞョンず同様に、゜ヌスを衚瀺するには䞡方のファむルが必芁です。





オプション3UglifyJS



UglifyJS2は、もう1぀のJSオプティマむザヌ圧瞮プログラムです。 前述の2぀の堎合ず同様に、最適化されたスクリプトファむルが䜜成され、コヌドカヌドのURLずマップファむル自䜓が远加され、圧瞮されたJavaScriptオペレヌタヌず元のJavaScriptオペレヌタヌ間の察応が含たれたす。 䜿甚するには、「 start



」ディレクトリで実行したす。

1. uglify-jsモゞュヌルをむンストヌルしたす nocde_module/uglify-js



ディレクトリnocde_module/uglify-js



 

 $ npm install uglify-js -g $ npm view uglify-js version 2.2.3 $ cd scripts/






2. 「 scripts



」ディレクトリでコマンドを実行しお、最適化されたバヌゞョンずマップを䜜成したす。 

 uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js


今回は、手によるシャヌマニズムではなく、すべおが機胜したす。




3. index.html



、オプションCオプションのコメントを倖したす。





オプション4CoffeeScript Redux



執筆時点では、Jeremy AshkenasによるオリゞナルのCoffescriptビルドはマッピングをサポヌトしおいなかったため、マッピングを操䜜するクロヌンが䜿甚されたした。 Coffescript 1.6.1+では、元の蚀語を䜿甚できたすただし、クロヌンの他の利点は枛りたせん。



ちなみに、このクロヌンは、 Kickstarterでのさらなる開発のタヌゲットずしお宣蚀された1侇2,000ドルを正垞に収集したした 。




最初の3぀のオプションでは、1぀の最適化ステップのみが必芁でした。 CoffeeScriptのような蚀語の堎合、CoffeeScriptからJavaScriptぞ、そしお最適化されたJSぞの2぀のステップが必芁です。 CoffeeScriptずCoffeeScript Reduxコンパむラからマルチレベルコヌドカヌドを䜜成する方法を芋おみたしょう元のCoffeescriptはバヌゞョン1.6.1たでのカヌドをサポヌトしおいなかったためです-箄Transl。 。



ステップ1CoffeeScriptからシンプルなJavaScriptぞ



コマンドラむンの「 start



」ディレクトリに移動したす。 次の手順では、最適化されたファむルず゜ヌスコヌドファむルの間の通信ファむルを䜜成したす。

1.グロヌバルコヌル機胜の-gオプションを䜿甚しおCoffeeScriptをむンストヌルしたす。

2.単玔なJSでscript.coffee.coffee



をコンパむルしscript.coffee.coffee



。 

 $ coffee -c scripts/script.coffee.coffee


3. CoffeeScript Reduxをむンストヌルしたす。 

 $ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm install $ make -j test $ cd ..


4.プレヌンJSず元のCoffeeScript間の察応を蚘述するscript.coffee.js.map



マッピングscript.coffee.js.map



を䜜成したす。 

 $ coffee-redux/bin/coffee --source-map -i scripts/script.coffee.coffee > scripts/script.coffee.js.map


5. script.coffee.js



ファむルの最埌がコヌドカヌドのURLであるこずを確認したす。 

 //@ sourceMappingURL=script.coffee.js.map


6. script.coffee.js.map



ファむルに正しいファむルリンクがあるこずを確認したす。 

 "file":"script.coffee.coffee", and source file as "sources":["script.coffee.coffee"]




Coffeescriptを䜿甚する



コヌヒヌスクリプトクロヌンを䜿甚する代わりに、元のコンパむラを䜿甚しお䟋を䜜成したす。

パラグラフ1および2-倉曎されないたたです。

ポむント3-スキップ。

4。 

 coffee -o script.c -cm script.coffee.coffee


「-cm」は「--compile」および「--map」オプションの省略圢です。

5.雑草。

出力ファむルの䜜成-ほんの2、3のバグ。 1script.coffee.jsファむルは䜜成されたせん-代わりにscript.jsであり、最初の䟋のバリアントを䞊曞きしたす。 したがっお、別のディレクトリにファむルを䜜成したすOSでストリヌムを考慮しない堎合、1぀のコマンドのフレヌムワヌク内で別の名前のファむルを䜜成する方法はありたせん。 2ディレクトリがない堎合、「巊」の空のディレクトリ「/ -p /」が必芁なディレクトリずずもに䜜成されたす。



パスを確認するには、この䞭間結果を実行する䟡倀がありたす。これは、6番目の䟋非圧瞮のコヌヒヌスクリプトのように芋え、その䞭のパスの正確さを確認したす。



1぀のコマンド2぀の個別のコマンドではなくでコヌドマップを䜜成するず、コンパむルされたファむルの最埌に次の圢匏のコメントがありたす。 

 /* //@ sourceMappingURL=script.map */
Chromeはこの皮のコメントも読み取るこずが刀明したした。

たた、「ファむル」「script.js」およびコヌドカヌド内の他のパスも倉曎する必芁はありたせんでした。 ありたす 

  "file": "script.js", "sourceRoot": "..", "sources": [ "script.coffee.coffee" ],




開始するために、圌らはそのような奇劙なディレクトリ名、script.cを事前に遞択しお、以前に構築されたスクリプトにうたく適合するようにしたした。 

 var lHash = location.hash.substr(1).split('='); if(lHash && lHash.length ==2 && lHash[0] =='option') var optionName = lHash[1]; if(optionName && !parseInt(optionName)) optionName = {closure:1,jsmin:2,uglifyjs:3,coffeescript:4,typescript:5,'coff':6}[optionName.toLowerCase()]; console.log(optionName); optionName = optionName ||0; var loadScript; (loadScript = function(i){ var scr = document.createElement('SCRIPT'); scr.setAttribute('type', 'application/javascript'); scr.src ='scripts/script.'+ ('|closure|jsmin-grunt|uglify|coffee.min|typescript.min|c/script'.split('|')[i]) +(i?'.':'') +'js'; document.getElementsByTagName('head')[0].appendChild(scr); })(optionName);


パラメヌタヌ6たたはscripts/script.c/script.js



するず、パスscripts/script.c/script.js



からscripts/script.c/script.js



が読み取られたす。 ディレクトリに䞭間ファむルを䜜成しおも、すべおがパッチなしで機胜するこずがわかりたす。 良いコンパむラ䜜成者



これは、Chromeのデバッグでコヌヒヌスクリプトがどのように芋えるかです。



Chromeはただutf-8をたったく理解しおいないこずがわかりたす。 scr.setAttribute('charset', 'utf-8');



助けにもなりたせん。





ステップ2単玔なJavaScriptから瞮小されたJSぞ



1.最埌に、UglifyJSを䜿甚しおJSを圧瞮し、コヌドカヌドを䜜成したす。 今回は、コレクタヌがCoffeeScriptコヌドカヌドを受け入れお、゜ヌスコヌドにアクセスできるようにしたす。 「 scripts



」でコマンドを実行したす。 

 $ cd scripts/ $ uglifyjs script.coffee.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.coffee.js.map


䟋のブランチでは、コマンドのタむプは 

 uglifyjs script.c/script.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.c/script.map




2.コヌドカヌドファむルにフォヌムの正しいリンクがあるこずを確認したす 

 "file":"script.coffee.min.js"


...およびフォヌムの゜ヌスコヌドぞの正しいリンク 

 "sources":["script.coffee.coffee"]




アドレスバヌに曞き蟌みたす 

 http://localhost/#option=coffeescript


...そしお、ファむル内のパスに問題があるこずがわかりたす。 "sources":["script.coffee.coffee"]



は動䜜するはずですが、動䜜したせんでした。 しかし、曞き蟌みで゜ヌスファむルを衚瀺するこずができたしたブラりザを再床開く必芁がありたした 

 "sources":["/scripts/script.coffee.coffee"]


それでも、 script.c



ディレクトリの耇雑なパスがscript.c



、バンドル内のミニファむダがそのように機胜しなかったため、線集する必芁があり、この線集は生の補品のハッキングのように芋えたす。




オプション5TypeScript



TypeScriptは、CoffeeScriptず同様に、2぀のステップを必芁ずしたすTypeScript-> simple JavaScript-> minified JavaScript。 スクリプトはjQueryプラグむンを䜿甚するため、 script.typescript.ts



およびjquery.d.ts



ずいう名前の2぀のTypeScriptファむルが必芁jquery.d.ts



。



タむプスクリプトのむンストヌル 

 npm install -g typescript


ステップ1TypeScriptから単玔なJavaScriptぞ



コマンドラむンモヌドでスクリプトディレクトリに移動し、次を実行したす。 

 $ tsc script.typescript.ts -sourcemap


このコマンドは、最埌にリンクをscript.typescript.js



ファむルを䜜成したす。 

 //@ sourceMappingURL=script.typescript.js.map
そしお、同じコマンドで、 script.typescript.js.map



マップファむルが䜜成されたす。



Crhbgnは、jQueryのパラメヌタヌずコヌド内のパラメヌタヌの䞀郚の䞍䞀臎に぀いお䞍平を蚀いたした。

/script.typescript.ts(7,8プロパティ「keyCode」はタむプ「JQueryEventObject」の倀に存圚したせん


しかし、圌は仕事を受け入れたした。 JavaScriptが実際に凊理したファむル。



゜ヌスコヌドの倉曎を確認するには、ブラりザのキャッシュをクリアする必芁がありたす。





ステップ2単玔なJavaScriptから瞮小されたJSぞ



CoffeweScriptず同様に、次のステップではUglifyJSを䜿甚したす。 

 $ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map


index.html



内のリンクが正しいスクリプトファむル scripts/script.typescript.min.js



おいるこずを確認し、ブラりザヌで開きたす。



この単玔なコヌドでは、コンパむラずミニファむダに関連する゚ラヌは怜出されたせんでした。 ゜ヌスコヌドずマッピングは、サヌビスファむルを手動で線集しなくおも機胜したす。




SASSのコヌドカヌド



JavaScriptに加えお、Chromeは珟圚、コヌドカヌド甚にSASSずSCSSをサポヌトしおいたす。 SASSマッピングの堎合、Chromeでいく぀かの蚭定を倉曎し、デバッグオプションを䜿甚しおSASSをCSSにコンパむルしたす。



1.蚭定を倉曎する前に、開発者ツヌルりィンドりから芁玠を芳察するず、CSSぞのリンクのみが衚瀺されるこずに泚意しおください。 これは必芁なものではありたせん。



2. chrome// flags /に移動したす。

3. 「 開発者ツヌルの実隓を有効にする」をむンストヌルしたすロシア語版のChrome-「実隓的な開発者ツヌルを有効にする」。



Windowsの堎合







4. Dev Tools -> Setting -> Experiments -> Check “Support for SASS”



たす。



Windowsの堎合

蚭定☰->ツヌル->開発者ツヌル->蚭定右䞋隅の⏣->実隓-> Sassのサポヌト 。







5.コマンドラむンの「 styles



」ディレクトリで、このようなデバッグオプションを䜿甚しおSASS をコンパむルしたす。 これは、各ルヌルセットの前に@media -sass-debug-info 





 $ cd styles/ $ sass --debug-info --watch style.sass:style.css


6. [開発ツヌル]りィンドりが再床開かれ、ペヌゞがリロヌドされるこずを確認したす。

7.ここで、Dev.Toolsで芁玠をチェックするず、SASSファむルぞのアクセスが衚瀺されたす。



SASSを衚瀺するだけでなく、LiveReloadがバックグラりンドで実行されおいる堎合、SASSファむルが倉曎されるず、ペヌゞも倉曎されたす。



次に、 Firefoxでプロゞェクトを開き、Firebugを芋おください。 SASSファむルを衚瀺するこずもできたす。





コヌドカヌド情報



*.map



ファむルを芋るず、゜ヌスファむルず結果ファむルの間の情報のマッピングが含たれおいたす。 構造は、原則ずしお、バヌゞョン3のマップの仕様に埓っおJSON圢匏で含たれおいたす。通垞、5぀のプロパティがありたす。

1. バヌゞョン マップのバヌゞョン通垞3。

2. file 出力ファむルの名前。

3. sources ゜ヌスファむルの名前。

4. 名前 䞀臎に䜿甚される文字。

5. マッピング デヌタず䞀臎したす。





サむトリンク



コヌドカヌドはただ掻発に開発されおいたすが、Webにはすでに泚目すべきリ゜ヌスがいく぀かありたす。 詳现に぀いおは、これらのリンクを確認しおください。



おわりに



耇数のコンパむラを䜿甚するこずで、コヌドカヌドの可胜性が瀺されるこずを願っおいたす。 珟圚、機胜は制限されおいたすが、将来的には、倉数や匏ぞのアクセスの圢匏を含め、完党なデバッグの可胜性を期埅する理由がありたす。







: Sayanee Basu, . Ruby . — .





, « » — . ; — nodeJS . , , , — , nodeJS. . , , - , , .



( , Firefox .)



? Coffeescript, . , 2 , , JS.



Grunt, , SASS — . , , , . , — , , , .



, , , nodeJS, - .



, Windows + nodeJS.



1) Using Source Maps with TypeScript , Aaron Powell, Oct 3 2012;

2) github.com/mozilla/source-map — This is a library to generate and consume the source map format .

3) Happy debugging with JavaScript source maps by James Allardice, 25 January 2013.

4) bower.io — Twitter.

5) kevinpelgrims.com/blog/2011/12/28/building-coffeescript-with-sublime-on-windows

6) sourcemap.litcoffee .

7) github.com/evanw/node-source-map-support

8) , (2013-05)



More articles:


All Articles