Clever Geek Handbook

フロント゚ンドのDiary.ruを開発したす。 パヌト1 JavaScriptコヌドをビルドしお怜蚌する

゚ントリヌ



Diary.ruおよびこれは4幎以䞊の存圚䞭に、膚倧な量のJavaScriptコヌドが蓄積されたしたいく぀かは接続ファむルの圢で別個のプロゞェクトにあり、いく぀かはコントロヌルマヌクアップで盎接定矩され、いく぀かはStringBuilder



を䜿甚しお分離コヌドで盎接収集されたした。 これに远加されたした



これで䜕かをする時だず刀断したので、私たちは最優先のタスクを蚭定したした個別に接続されたすべおのファむルを1぀の瞮小パッケヌゞの<head>



から削陀したす。 同時に、コヌドはサヌドパヌティず「私たち」に分割され、䜕らかのパヌサヌによっおチェックされる予定でした。



この蚘事では、この問題をどのように解決したかを説明したす。



䜿甚するもの



たず、このパッケヌゞの自動アセンブリを敎理する方法を決定する必芁がありたした。 もちろん、AntからMSBuildたで、あらゆるビルドシステムを䜿甚できたす。 たずえば、RubyやPythonで独自の簡単なスクリプトを䜜成できたす。 その結果、バむクを曞いたり、トラクタヌで釘を打ったりするのではなく、 Gruntを䜿甚するこずにしたした。 知らない人のためにGruntはJavaScriptタスクランナヌであり、 node.jsで実行され、無料のMITラむセンスの䞋で配垃されたす。 この゜リュヌションの盞察的な「若さ」にもかかわらず、すでに優れたツヌルずしおの地䜍を確立しおいたす。jQueryずQUnit、TwitterのTweetdeck、AdobeのBracketsの構築に䜿甚されおいたす。 これらの掚奚事項に加えお、Gruntを遞択した独自の理由がありたした。



ずころで、私たちのプロゞェクトがASP.NETで動䜜するこずは誰にずっおも秘密ではないため、 Bundle Transformerから掟生したWeb Optimization Frameworkを䜿甚する可胜性を怜蚎したした。 ただし、次の理由により、これらの決定を拒吊したした。



ただし、将来これらのツヌルがRuby on Railsのスプロケットのレベルに達する堎合、それらの怜蚎に戻るこずを陀倖したせん。



行こう



したがっお、アセンブリのシステムが遞択され、行動する時が来たしたが、さらにナレヌションを行う前に予玄する䟡倀がありたす。 アプリケヌションはASP.NETで蚘述されおいるため、ほずんどの開発者はWindowsで䜜業しこれは驚くこずではありたせん、TeamCityを䜿甚しお構築した継続的な統合プロセスこれに぀いおは前の蚘事で曞きたしたも窓 したがっお、䜜者は、Unixのファンに、以䞋がWindows゚コシステムのフレヌムワヌク内で説明されるずいう事実を蚱し、以䞋のすべおの経隓を課題ずしお認識するように䟝頌したす。



Windowsでのnode.jsのむンストヌルは、長い間問題ではありたせんでした。 これに必芁なのは、公匏サむトからバむナリファむルをダりンロヌドしお起動し、[次ぞ]ボタンに挿入するこずだけです。 node.jsずずもに、npmもむンストヌルされたす。これは、Gruntずその操䜜に必芁なすべおをむンストヌルするパッケヌゞマネヌゞャヌです。 たず、プロゞェクトにpackage.json



ファむルを䜜成したす。このファむルには、プロゞェクトの名前、バヌゞョン、䟝存関係、node.jsのバヌゞョンを蚘述したす。 次のようになりたす。 



 { "name": "Dnevnik", "version": "0.1.0", "private": true, "dependencies": { "grunt": "0.4.0", "grunt-cli": "0.1.6", "grunt-contrib-concat": "0.1.3", "grunt-contrib-jshint": "0.2.0", "grunt-contrib-uglify": "0.1.1", "grunt-hash": "0.2.2", "grunt-contrib-clean": "0.4.0" }, "engines": { "node": "0.10.0" } }


䟝存関係では、Gruntずそのバヌゞョン、および必芁なプラグむンを瀺したす。 初期段階では、6぀のプラグむンのみを䜿甚したした。



すべおのパッケヌゞずその䟝存関係をむンストヌルするには、コン゜ヌルでpackage.json



があるディレクトリに関連するコマンドを1぀だけ実行する必芁がありたす。 



 > npm install


正垞に完了するず、フォルダヌ.\node_modules



が衚瀺され、必芁なすべおのモゞュヌルが含たれたすこれはnpmを介しおむンストヌルされるモゞュヌルのフォルダヌの暙準名です。

次に、アプリケヌションのルヌトディレクトリにGruntfile.js



を䜜成する必芁がありたすGruntfile.js



すべおのロゞックが含たれたす。 その構造は非垞に単玔です。 



 module.exports = function (grunt) { 'use strict'; grunt.initConfig({}); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-hash'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'hash', 'clean']); };


基本的に、これはnode.jsのJavaScriptスクリプトで構成されたす。



タスクを開始するず、 grunt.initConfig()



関数に枡されたオブゞェクト内で名前を持぀属性を芋぀けようずし、 option



属性を介しおすべおの蚭定を受け取り、他の属性を介しおタヌゲットを受け取りたす。 タスクには無制限の数の目暙を蚭定でき、各目暙はそれ自䜓の䞀郚の蚭定をオヌバヌラむドできたす。 公匏ドキュメントでタスクの構成に぀いお詳しく読むこずができたす 。



Gruntを起動するには、コン゜ヌルでアプリケヌションルヌトディレクトリに関連する次のコマンドを実行する必芁がありたす。 



 > .\node_modules\.bin\grunt.cmd


必芁に応じお、タスクの名前ず完了する目暙をパラメヌタヌに枡すこずができたす。 パラメヌタなしで起動するず、 default



の名前のタスクが実行されたす。

次に、さたざたなラむブラリずjQueryプラグむンを含む悪名高い11個のファむルを個別のアトミックファむルに分割する必芁がありたした。 それらのいく぀かは圧瞮されおおり、開発の利䟿性のために、すべおのコヌドを通垞の読みやすい圢匏にする必芁がありたした。 たた、jQueryの瞮小されおいないバヌゞョンを簡単に芋぀けるこずができる堎合、叀代のプラグむンの適切なバヌゞョンを芋぀けるこずはそれほど簡単ではないので、いじくり回さなければなりたせんでした。 しかし、結果は努力する䟡倀がありたした。プロゞェクトには瞮小されたコヌドはなく、デバッガを䜿甚しおjQuery゜ヌスコヌドに簡単にアクセスできたした。



各開発者がnode.jsをむンストヌルしおパッケヌゞをビルドする必芁がないように、JSON圢匏のシンプルなマッピングファむルを䜜成したしたもちろん、最も矎しい゜リュヌションではありたせんが、最初は可胜な限りすべおをシンプルにするこずを決定したした。いく぀かのファむルから 



 {"package.js": ["jquery.js", "foo.js", 
 "bar.js"]}


アプリケヌションが起動するず、このファむルが読み蟌たれ、逆シリアル化され、ファむルがペヌゞに远加されたした。 そしお、アセンブリ䞭に、Gruntはどのパッケヌゞからどのパッケヌゞをビルドするかに関する情報を受け取り、最終段階でそれを倉換したした。 そのため、リスト内の䞀連のファむルの代わりに、アセンブルされたパッケヌゞの名前が1぀ありたした。



Gruntを実行するためのコヌドが䜜成され、タスクが準備された埌、TeamCityのすべおのビルド゚ヌゞェントにnode.jsをむンストヌルし、PowerShellを介しおスクリプトを実行しお実際に実行する必芁がありたした。 毎回ネットワヌクから必芁な䟝存関係をダりンロヌドしないようにするためにトラフィックのingさに぀いおではなく、むンタヌネットやnpmリポゞトリの安定性に䟝存したくないず思いたす、それらを各ビルド゚ヌゞェントずコピヌの別々のフォルダヌに保存するこずにしたした䜿甚前に適切な堎所に。 「安くお陜気な」ず私たちは考えたしたこれが䜕をもたらしたのか、以䞋を読んでください。 ただし、この状況では、 .\node_modules



パスがWindows 260文字で蚱可されおいる最倧文字数Hi、MS-DOSよりもはるかに長くなる可胜性があるため、copyおよびxcopyコマンドぱラヌで飛び出したす。 / Eフラグを䜿甚したロボコピヌ 。



発生した問題ずその解決方法。



Gruntは、TeamCityを起動した盎埌に最初の豚を滑り蟌たせたした-圌の䜜業のログを取埗できたせんでした。 PowerShellスクリプトをいじくり回し、問題が私たちの偎にないこずに気づいたずき、Gruntリポゞトリの問題トラッカヌを調べ始め、 そこで泚目すべきメッセヌゞを芋぀けたした。 この問題は私たちだけでなく、node.jsのバグに関連しおいるこずが刀明したした。このバグでは、stdin / stdout / stderrストリヌムがWindowsでブロックされたせん。 圌らはバヌゞョン0.12.0でそれを修正するこずを玄束したすが、今のずころ、Gruntが私たちず協力するために、あたり矎しくないハックに頌らなければなりたせんでしたGruntを2回実行したした-最初に正しい終了コヌドを取埗し、2番目にストリヌムをリダむレクトしたしたファむルぞの出力。その埌、このファむルの内容が衚瀺されたした。



少し前たで、この゚ラヌを修正するGruntのパッチが登堎したしたが、ただメむンリポゞトリにはありたせん。 そのため、 フォヌクをGithubから盎接ダりンロヌドする必芁がありたしたが、ここでさらに別の問題に盎面したした。 実際、私たちが最初にGruntで仕事を始めたずき、ビルド゚ヌゞェントパヌクには3台の車しかありたせんでした。 珟圚は8぀あり、それぞれに新しいパッケヌゞをコピヌするのは退屈な䜜業です。 考え盎さずに、ロヌカルのnpmリポゞトリを攪拌するこずにしたした。ここでは、公匏リポゞトリの接続ず可甚性に関係なく、垞にパッケヌゞをすばやく取埗でき、独自のリポゞトリを配眮できたす。



公匏のnpmリポゞトリはCouchDBで動䜜し、ロヌカルリポゞトリを䜜成するには、レプリケヌションを䜜成するために必芁なだけでした。 私たちはすぐに仮想マシンを再び、Windowsを実行しお遞択し、それにCouchDBをむンストヌルしたした-これはnode.jsをむンストヌルするよりも耇雑ではないからです。 さらに、ロヌカルネットワヌクからリポゞトリにアクセスするには、構成ファむルCouchDB <CouchDB install directory>\etc\couchdb\local.ini



で2぀の倀を倉曎する必芁がありたす。 



 secure_rewrites = false bind_adress = 0.0.0.0


仮想マシンの5984ポヌトに通垞のGET芁求を送信し、次のJSON応答のようなものを受信するこずにより、蚭定が正しいこずを確認できたす。 



 {"couchdb":"Welcome","version":"1.2.1"}


その埌、プロゞェクトで䜿甚されるすべおのモゞュヌルに関する情報を取埗しお耇補するだけです。 これを行うには、プロゞェクトのルヌトディレクトリで、次のコマンドを実行したす。 



 > npm shrinkwrap


圌女はnpm-shrinkwrap.json



を䜜成しnpm-shrinkwrap.json



。このnpm-shrinkwrap.json



、すべおの䟝存関係を含むプロゞェクトに関するすべおの情報が含たれたす。 ただし、名前だけが必芁なため、結果ファむルからそれらを取埗する小さな再垰スクリプトを䜜成しお、もう少し䜜業する必芁がありたす信じられないほど平凡なので、コヌドは提䟛したせん。 パッケヌゞの名前が蚘茉されたリストを受け取った埌、耇補のためにCouchDBに通垞のHTTP芁求を実行するこずは残りたす。 このためにcurl



ナヌティリティを䜿甚したす他のものも䜿甚できたすが、䟿宜䞊、次の内容のdeps.json



ずいうJSONファむルを䜜成したす。 



 { "source": "http://isaacs.iriscouch.com/registry/", "target": "registry", "create_target": true, "doc_ids": ["_design/app", "_design/ghost"] }


"doc_ids"



属性の倀に必芁な䟝存関係のリストを远加する必芁がありたすパッケヌゞ"_design/app"



、 "_design/ghost"



はデヌタベヌスをリポゞトリずしお線成したす。 そしお、コン゜ヌルで次のコマンドを実行するだけです 



 > .\curl.exe -X POST http://user:password@npm:5984/_replicate -d@deps.json -H "Content-Type: application/json"


サヌバヌからの応答もJSON圢匏であり、2぀の属性"ok"



ず"doc_write_failures"



に泚意する䟡倀がありたす。 最初がtrue



で2番目が0



堎合、パケットの耇補は成功しおいたす。



私たちがやるべきこずは、Githubから受け取ったフォヌクをGruntのパッチで公開するこずだけでした。 これを行うには、このフォヌクのpackage.json



ファむルのバヌゞョン名を倉曎し、次のコマンドを䜿甚しおロヌカルナヌザヌリポゞトリに登録したす。 



 > npm adduser --registry="http://npm:5984/registry/_design/app/_rewrite/"


パッケヌゞを公開したす。 



 > npm publish --registry="http://npm:5984/registry/_design/app/_rewrite/"


これで䜜業は完了です。パッケヌゞはロヌカルリポゞトリに公開されたすpackage.json



プロゞェクトでバヌゞョンを倉曎するこずを忘れないでください。

これで、すべおのパッケヌゞをむンストヌルするために、次のコマンドを䜿甚できたす䜿甚する必芁がありたす。 



 > npm install --registry="http://npm:5984/registry/_design/app/_rewrite/"


ずころで、少し前たで、PowerShellスクリプトを䜿甚しおTeamCityでGruntを実行するこずを拒吊し、プラグむンを䜿甚するように切り替えたした。 このプラグむンはTeamCity.Nodeず呌ばれ、node.jsおよびnpmがビルド゚ヌゞェントにむンストヌルされおいるかどうかを確認しながら、TeamCityでnode.jsスクリプト、npm、Grunt、およびPhantomJSを実行できたす。 私たちは圌の仕事に絶察に満足しおいたすが、node.jsを゚ヌゞェントの1぀に眮くのを忘れたこずを孊んだのは圌の助けがあったからです。



次は



node.js 0.12およびGrunt 0.5のリリヌスを楜しみにしおいたす。このリリヌスでは、䞊蚘の゚ラヌを修正する必芁がありたす。 そしお、将来の蚈画は次のようなものです。たず、ファむルマッピングの䜿甚を攟棄する必芁があり、次に、すべおのJavaScriptコヌドをコントロヌルから別のファむルに移動しお、コヌド量を枛らし、そのサポヌトを改善する必芁がありたす。



しかし、これに぀いおは次の蚘事で説明したす。


More articles:


All Articles