問題タブ [source-maps]

css ソース マップの仕組みを理解しようとしています。非常に単純なscssファイルを作成しました。

上記の scss をコンパイルすると、次のマップ ファイルが得られます。

「マッピング」をデコードすると、次の値が得られます。

それらの値は何ですか？

それで、LuvvieScript の進歩を開始し、Twitter ですべてが少し始まりました... https://twitter.com/gordonguthrie/status/389659700741943296

Anthony Ramine https://twitter.com/nokusuは、私のやり方が間違っていて、Erlang AST ではなく Core Erlang を介して Erlang から JavaScript にコンパイルするべきだと指摘しました。これは私にとって説得力のある選択肢ですが、魅力的ではありません... Twitterはその議論の適切な媒体ではないので、ここに書いてアドバイスを得ようと思いました.

戦略概要

LuvvieScript には 3 つのコア要件があります。

• 同じパフォーマンスの Javascript にコンパイルされる Erlang の有効なサブセット
• Javascript ではなく LuvvieScript でブラウザーでデバッグできるように、完全なソース マップ
• LuvvieScript モジュールを実行するための「ランタイム」クライアント側 JavaScript 環境 (サーバー側通信を使用) (一種のページ内スーパーバイザ...)

これらのオプションの 3 番目は、この議論の範囲外ですが、最初の 2 つはコアです。

lazy-gits の当然の帰結があります - 私はできるだけ多くの Erlang および Javascript 構文ツール (レクサー、パーサー、トークナイザー、AST 変換など) を使用し、最小限のコードを記述したいと考えています。

現在の考え方

コードが現在次の構造として書かれている方法:

• コードを Erlang AST (行番号付き) にコンパイルします。
• コードをトークン化し (コメントと空白を保持)、それらのトークンを使用して、行/列情報をトークンにマップする辞書を作成します。
• 辞書と AST をマージして、行/列の AST を作成します (さまざまなアリティの fn をグループ化するためのちょっとした工夫が必要です)
• SpiderMonkey パーサー API https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_APIに実装されているように、この新しい Erlang AST を Javascript AST に変換します。
• JavaScript AST https://github.com/puffnfresh/brushtailでテール呼び出しを変異させるには、brushtail などの Javascript utils を使用します。
• ESCodeGen などの Javascript ユーティリティを使用して、javascript を発行します https://github.com/Constellation/escodegen

基本的に、次のような Erlang AST を取得します。

次に、次のような Javascript JSON AST に変換します。

エル プロブレモ

Anthony の主張はよくできています - Core Erlang は Erlang よりも単純化されたより正規の言語であり、単純な Erlang よりも Javascript へのトランスパイルがより容易になるはずですが、十分に文書化されていません。

Core Erlang の AST のような表現を簡単に取得できます。

ただし、行の列/番号はありません。したがって、JS を生成する AST を取得できますが、決定的に SourceMap は取得できません。

質問 1必要な行情報を取得するにはどうすればよいですか - (「通常の」Erlang トークンから列情報を取得できます...)

Erlang Core は、生成プロセスにおいて通常の Erlang とは少し異なります。これは、関数呼び出しで変数名を独自の内部変数に置き換え始めるためです。これにより、ソース マップの問題も発生します。例として、次の Erlang 節があります。

Erlang AST は名前を適切に保持します。

コア Erlang は、関数で呼び出されるパラメーターの名前を既に変更しています。

質問 2 Core Erlang で変数名を保存またはマップするためにできることはありますか?

質問 3コア Erlang が、Erlang にコンパイルしやすく、Erlang コードを変更するツールを作成しやすいように明示的に設計されていることを高く評価しています。

オプション

コアの erlang コードをフォークしてソース マッピング オプションを追加することもできますが、ここでは怠け者のカードをプレイします...

アップデート

Eric の回答に応えて、Core Erlang のセルレコードを生成する方法を明確にする必要があります。最初に、以下を使用して、プレーンな Erlang をコア erlang にコンパイルします。

次に、この関数でcore_scanとからニックネームを使用します。core_parsecompiler.erl

問題は、そのツールチェーンに注釈付きの AST を発行させる方法です。これらのオプションを自分で追加する必要があると思います:(

Chrome の開発者ツールで AngularJS のソース マップを表示しようとしています。私は簡単なウェブページを作りました：

これは として保存されindex.html、3 つの AngularJS ファイル ( angular.js、angular.min.jsおよびangular.min.js.map) をAngular の bower リポジトリから直接libサブディレクトリにコピーし、開発者ツールの設定ページで [ソース マップを有効にする] オプションがオンになっていることを確認しました。を使用して、このディレクトリの内容を提供しpython -m SimpleHTTPServerます。しかし、Chrome はマップ ファイルをサーバーに照会することさえしません。これはサーバーのログに表示されます。

次に、 Coffee Script デモやHTML5Rocksページにリンクされているデモなどのソース マップ デモを読み込んでみましたが、実際にはどれもマップ ファイルを読み込んでおらず、「ネットワーク」タブに表示されると思います。

これは、Debian SID システム上の Chrome 28.0.1500.95 です。

私が間違っていることは何ですか？

grunt でコンパイルされたアプリのソース マップを含むワークフローを知っていますか?

uglifyjsソースマップを簡単に生成できるようなプラグインについてはよく知っています。しかし、これを 1 回限りのソース マップを作成するのではなく、より複雑なワークフローに組み込むことを検討しています。

最も人気のある Yeoman ジェネレーター (私が知っている) では、ワークフローでソース マップが欠落していることに気付きました。これは、ソース マップの主要なプラグインがサポートされていないためですか? それとも、ワークフローにソース マップが必要ないということでしょうか?

私が遭遇した一般的な grunt プラグインの注目すべき問題の原因は次のとおりです。

uglifyハッキーな修正なしでは、最も基本的なプロジェクト構造でさえ処理できません。

useminまた、プロジェクトごとに 1 つしかサポートできないという点で、最も単純な構成を超えてソース マップを処理することもできません(ただし、修正するにはハックが必要です)。可能な解決策は明らかに使用を完全に停止することですが、そうすると、 、、および とusemin組み合わせるなど、すべての利点を失うことになります。revwatchconnect

アプリをテストするときに、連結されていない/縮小されていないソースを使用してテストすることが最善の方法であると考えています。もちろん、これは理想的とは言えません。テスト環境が本番環境を可能な限り反映するようにしたいからです。

grunt プロジェクトでソース マップを使用しますか? どのようにしますか？そうでない場合、サポートの欠如をどのように回避しますか?

私が取り組んでいるプロジェクトは、少ないコンパイラを実行するコードを使用しています。

less ファイルからコンパイル済み css にインライン ソース マップを追加するのに問題があります。ノードから次のコードを実行しています。

追加できるオプションはありますか? 私は追加しようとしましたがsourceMap: true、outputSourceFiles: true成功しませんでした。