問題タブ [babeljs]

ES6 で記述されたコンポーネントを含む React アプリケーションがあります - Babel と Webpack を介してトランスパイルされます。

いくつかの場所では、 react webpack cookbookで提案されているように、特定のコンポーネントを含む特定の CSS ファイルを含めたいと考えています。

ただし、コンポーネント ファイルで静的な CSS アセットが必要な場合は、次のようにします。

import '../assets/css/style.css';

その後、コンパイルはエラーで失敗します:

Component ファイルで CSS ファイルを要求しようとすると、Babel ローダーはそれを別のソースとして解釈し、CSS を Javascript にトランスパイルしようとするようです。

これは期待されていますか？これを達成する方法はありますか?トランスパイルされたファイルが、トランスパイルされない静的アセットを明示的に参照できるようにしますか?

次のように、.js/jsx アセットと CSS アセットの両方のローダーを指定しました。

完全な webpack 構成ファイルを表示する

以下の完全な詳細:

webpack.common.js - 私が使用するベース webpack 構成で、開発と運用の間でプロパティを共有できます。

Gruntfile.js - 開発に使用される Gruntfile. ご覧のとおり、上記の webpack 構成が必要で、いくつかの開発プロパティが追加されています。これが問題を引き起こしている可能性はありますか?

Html.jsx - CSS をインポート/要求しようとする HTML jsx コンポーネント。これは同形アプリ ( Fluxbileを使用) であるため、レンダリングされたコンポーネントとして実際の HTML が必要です。アプリケーションの任意の部分で、このファイルにある require ステートメントを使用すると、説明されているエラーが発生します。

うなり声と関係があるようです。コンパイルするだけならwebpack --config webpack.common.js、エラーは発生しません。

簡単な答え: ノードのランタイム エラーです。同形のアプリでサーバーに CSS をロードしようとするのは得策ではありません。

私は次のものを持っていますgulpfile

問題は、それがgulp browserifyうまく機能することです。ただし、gulp browserify-watch変更は検出されますが、出力は更新されません。

私は何を間違っていますか？

このスニペットを BabelJS で実行すると、次のようになります。

それは出力します

これは私が期待するものではありません。ランニング

生産する

これはまさに私が拡張エラーから望んでいるものです。

私の目標はError、さまざまなサブクラスに拡張し、それらを bluebird のcatchマッチングで使用することです。これまでのところ、それは惨めに失敗しています。

サブクラスがメッセージまたはスタック トレースを表示しないのはなぜですか?

編集: Chrome の組み込みサブクラス化(@coder のおかげ) を使用すると、完全に機能します。次の例 ( Babel の gitter フィードの @loganfsmythから) が示すように、これは必ずしも Babel に固有のものではありません。

Less プラグインを使用すると、ファイルを保存するたびに、すばらしい Less -> Css コンパイルを取得できます。ES6 コードを ES5 にトランスパイルするために、Babel で同じ動作を得るにはどうすればよいですか? ありがとう

現在のすべてのモジュール ローダーはAMD,CommonJS,SystemJS、外部オブジェクトを現在のモジュール スコープにロードするために変数定義を使用するのと同様です

お気に入り：

また：

外部モジュールから何をインポートする必要があるのか​​ わからない場合、またはすべてをインポートする必要がある場合、実行時に変数を定義できないため、これが問題になります。

これが ES6 トランスレータが使用しない主な理由だと思います

構文であり、これらは ES6 仕様には含まれていません。

したがって、動的モジュールスコープとは、モジュール変数を実行時に定義/ロードできることを意味します。これにより、ES6 構文を次のように拡張できます。

私の見解では、これは、次のようなすべての名前をリストするよりも、インポートを定義するためのより最適な方法です。

今私の本当の質問：

withこれを達成するために使用しないのはなぜですか？

問題を解決できる ES6 から ES5 への簡単な変換例を次に示します。

ファイル: modules/module-1.js

に：

ファイル: modules/module-1.js

に：

withトランスパイラー/ローダーでも避ける必要は本当にありますか?

私は別の ES6to5 トランスレータとモジュール ローダーを作成することを考えているので、この人たちについてのあなたの考えに感謝します。:)

基本的に、IDE で TypeScript コードを記述し (これにより開発が大幅に容易になります)、それを ES6 にコンパイルし、babel.js(すべてのブラウザーがほとんどの ES6 をサポートしていないため) 適用して、結果の ES5 スクリプトを取得できる必要があります。

これは可能ですか？どうすればこれを達成できますか？

私は、jQuery プラグインを使用して ES6 を記述し、Gulp Babel を使用してコードを ES5 にコンパイルできるようにしたいと考えています。Browserify を使用して動作させる必要はありません。

たとえば、次のようなクラスがあるとします。

Babelify を使用すればこれを機能させることができますが、別のプロセスに依存する必要がない方法を見つけたいと思います。Babel を使用すると、コンソールに次のエラーが表示されますUncaught ReferenceError: require is not defined。コードを確認したところ、インポートが必要になっているようです。

これを回避する方法はありますか、それとも Browserify (Babelify) を使用して JavaScript をコンパイルする必要がありますか?

編集:現在、jQuery プラグインも機能させるためにbrowserify-shimを使用しています。

EDIT2: いいえ、これは RequireJS に関するものではありません - 私は Babel で Browserify の使用を削除しようとしています

を使用してアプリをセットアップしたい

1. ブラウザ化
2. BabelJS
3. ESLint
4. React(jsxあり)
5. 冗談

タスクマネージャーとしての Npm (gulp|grunt|brocoli なし)

私はES6をES5に変換しています。

1. NodeJS Express サーバー ファイル用の BabelJS と、ディレクトリ build/server/ へのサーバー側レンダリング出力。
2. build/client/bundle.js ファイルへの ReactComponents 出力の Browserify + babelify

build/client/bundle.js から build/server/ ファイルに React コンポーネントをインポートしようとすると、トランスパイルされていない ReactComponent をインポートしているため、アプリがクラッシュします。

サーバーでコードを複製せずに (client/bundle.js のコードを再利用して) ReactComponent をインポートするにはどうすればよいですか?

私の中に次のスクリプトがありますpackage.json：

を実行するnpm startと、次ps aux | grep nodeの 2 つのプロセスが実行されていることがわかります。

私のアプリはどれですか? 2 つのプロセスで実行されるのはなぜですか?