私は大きな angular2 アプリケーションを持っています - JIT モードで完璧に動作します。ただし、AOT のコンパイルとロールアップを実行すると、アプリケーションは機能しなくなります。

私が受け取っているエラーは

調査した結果、バレル ファイルがこの問題の原因であることがわかりました。次のようにサービスをインポートすると:

エラーが発生します。しかし、インポートステートメントを次のように変更すると:

すべてが機能します...

誰でもこれを修正する方法を知っていますか? バレルファイルの使用をやめたくない...

PostCSS で解析する必要がある SCSS スタイルシートと Lost グリッド システムの両方を使用するようにロールアップをセットアップしようとしています。SCSS が正しく解析されていることを確認しましたが、PostCSS プロセッサは効果がないようです。

rollup-plugin-sassdocsによると、バニラJS関数をprocessorオプションに渡すだけです。これはエラーなく動作しますが、生成された CSS も例外ではありません。

で呼び出された私のロールアップ構成は次のrollup -c config/dev.jsとおりです。

行のコメントを外しprocessorても効果はありません。lost-column行をディレクティブに変換calcし、それらを必要とする CSS プロパティにベンダー プレフィックスを追加する必要があります。

これを行う正しい方法は何ですか？

ロールアップ エラーの例

ロールアップに関する (考えられる) 問題を説明します。

何か不足していますか？これは、私が遭遇した「問題」を再現するための最小限の構成のプロジェクトです。問題は、バンドル自体に影響を与えずに無関係なコマンド ライン ロギングのみのようです。つまり、バンドルが正確かつ正確に作成されます。

このプロジェクトは次の出力を表示します。

これを再現するコマンドは次のとおりです。

• npm run bundle、 また
• ./node_modules/.bin/rollup -c rollup.js

他のプロジェクトでは、バンドル自体には影響しないと思われる追加の解決「失敗」に関する同様の問題があります。これは簡単に修正できるものですか？

この動作を示すGit リポジトリ ( https://github.com/kalisjoshua/rollup-error-example ) を作成しました。

私は何が欠けていますか？

私は、jit と aot コンパイルを使用して、Lite サーバー上でローカルに実行される Angular2 アプリケーションを持っています。

aot については、https://angular.io/docs/ts/latest/cookbook/aot-compiler.htmlのチュートリアルに従いました。今、Apache サーバーでアプリケーションをホストしたいと考えています。ただし、私のプロジェクトにはいくつかの構成上の問題があるようです。サブフォルダー node_moduels と app + dist/build.js を含むコンパイル済みの aot フォルダーがあります。ここまでは順調ですね。フォルダー aot + dist とファイル index.html (チュートリアルのように build.js を参照) + styles.css を apache サーバーにコピーするとうまくいくはずだと思いました。ただし、これはアプリの実行時に間違った参照につながります。

index.html で参照されているすべてのファイルに対して 404 を取得します。例: http://apacheserverurl/dist/build.js

ブラウザで index.html を手動で開くと、同じ問題が発生します。私はすべてのjavascriptとhtmlファイルをコンパイルしたので、これはうまくいくはずではありませんか?

どんな助けでも大歓迎です。

NPM パッケージをビルドするとき、Webpack、Rollup、または Browserify バンドル サイズを節約するために個々のエクスポートをチェリー ピッキングできるビルドをどのように作成しますか?

好ましい構文は次のとおりです。

import { myModuleOne, myModuleTwo } from 'my-npm-package';

または

node.jsでグローバル変数を動作させようとしていますが、私の理解はドキュメントと一致していても、概念をよく理解していないようです。

最小限の例

ロールアップを使用してコンパイルされた私のmain.jsファイルは次のとおりです。

私のcore/test.jsファイルは単純です：

これにより、次のエラーが発生します。

Uncaught ReferenceError: a が定義されていません

完全にコンパイルされた出力は次のとおりです。

の後aに定義されるようです。これが JS で問題になるかどうかは 100% わかりませんが、エラーが発生している可能性があります。 console.log(a);

私の質問は次のとおりです。何が原因で、ここで何が間違っているのですか?

おそらく関連する情報: Laravel Elixir を使用してすべてをコンパイルしています。

注: node.js または一般的にグローバル変数を使用するかどうかについての議論を投稿しないでください。通常は悪い考えであることはわかっていますが、この場合はそれを行う十分な理由があります。

編集：追加のコンテキスト

私が実際にやろうとしているのは、node.js を介して Zurb Foundation を Laravel Elixir と連携させることです。foundation-sitesNPM経由でインストールしました。foundation-sitesに依存しておりjquery、それ自体をプルします。ただしvar jquery = require('jquery');、Foundation は、独自の js ファイルのようなものを使用するという通常の規則に従っていないようです。jQuery実際には、利用可能なグローバル変数に依存しています。したがって、私は何とかそれを保証する必要があります。

私の実際のファイルは次のようになります。

したがって、Foundation/Laravel 固有の回答があれば、私も喜んでお聞きします。私が取得していないものはありますか、それとも Foundation がパッケージを「正しい」方法で作成しなかっただけですか?