問題タブ [umd]

ES6 ライブラリをモジュール化して1 つの ES5 UMD ファイルにトランスパイルするようにセットアップする最良の方法は何ですか? async.js と lodash のやり方を見てみたのですが、どうなっているのかわかりにくいです。

たとえば、index.js次のとおりです。

とdoSomething.js:

そのユーザーは次のようなことができます：

パスを正しく評価していないため、Babel には運がtransform-es2015-modules-umdありません。また、Babel はすべてを 1 つの ES5 ファイルにまとめていません。誰でもこのようなことの簡単な例を持っていますか?

React Virtualized Selectを使用して、選択ドロップダウンに約 100 万件のレコードを表示したいと考えていました。フラスコとangularjsに基づいてプロジェクトを作成しました。angularjs を介してそのようなドロップダウンのリソースを見つけることができなかったため、この選択ドロップダウンを取得するために、react.js と angular.js を使用することにしました。

私の質問に来て、私が今まで試したコードの下を見つけてください。私は nodeJS を使用していないため、これらのドロップダウンで重要な役割を果たす「require」または「include」を使用することはできませんが、幸いにも「react-virtualized-select」用の UMD JavaScript ファイルが提供されていたので、これらのスクリプトを最後に含めました。 HTML本体の、しかし、コードを実行すると、コンソールにエラーが表示されます

embedded:20 Uncaught ReferenceError: VirtualizedSelect が定義されていません

適切な方法で反応を実装しているか、またはUMDファイルについて間違っていることを誰かが教えてくれますか? 前もって感謝します。

更新: 問題を強調する JS Fiddle を作成しました。また、SO からのコメントに基づいてコードにいくつかの変更を加えました。

JSFiddle Demo

を使用する代わりに、モジュール名に直接 webpack をブラウザーに公開するにはどうすればよいModule.defaultですか?

これは、私が達成したいことをうまく表現できるように、簡単な方法でアプリをセットアップしたものです。

webpack.config.js

.babelrc

app.js

出力の「ライブラリ」として「App」を指定したため、私のライブラリはブラウザで として利用できますApp。

奇妙なことに...エクスポートされたデフォルトの関数を使用するには、私がしなければならないApp.default. しかし、otherエクスポートされた関数を使用するには、次のようにしますApp.other。App()デフォルトのエクスポートされた関数を呼び出すことができると思いますが、もう一方は同じApp.other()です。

これはブラウザでの標準的な動作ですか、それとも webpack を使用した UMD でラップされたライブラリですか? これは、lodash ライブラリの動作を模倣していないようです。私の構成は何らかの形でオフになっていますか?

しかし、ブラウザでlodashのライブラリ（レポ）を見てみると、それを実現していることが分かります。

Lodash は webpack を使用して構築されています。lodashのpackage.jsonの中を見てみると、メインファイルはlodash.js. そのファイルを見ると、UMD でラップされているように見えます (ファイルの下部にある UMD 定義)。したがって、私が次のようなことをするとき：

すべて正常に動作します。

正常に動作するもう 1 つのことは、HTML ファイルでその正確なファイルを参照することです。

これにより、lodash オブジェクトにアクセスできます。

どうすれば同じ動作を得ることができますか。Lodash の webpack 構成は必要以上に複雑で、リバース エンジニアリングに必要なものがわかりません。

このリンクを大まかにたどって、配布用の反応コンポーネントを作成しました。私のwebpackプロダクションビルドは以下です。

しかし、私のビルドは、個々のファイル サイズを合わせたサイズが約 1/10 であることを考えると、予想よりもはるかに大きくなります。具体的には、ソース js とそれ以下のファイルを合わせた私のファイル サイズは、わずか 1.6kb です。ただし、ビルドは 13kb で最大 10 倍です。

私のコンポーネントは非常にシンプルで似ています。FlexTable、FlexTableRow、および FlexTableCell ファイルがあります。それらはすべて、以下と同じ署名を持っていますが、style.less. 私のstyle.less場合、基本的には etc などと言う数行の css ですdisplay: flex; flex: 0。要約すると、非常に最小限の js と非常に少量の css です。

問題は、プロダクション ビルドが 1.6kb から 13kb に膨らむのはなぜですか? 私は何を間違っていますか？

my-flex-table.js

(上記の FlexTable を FlexTableRow または FlexTableCell に置き換えると、他のファイルがあります)

これら 3 つすべてをmodule.exports package.json= {FlexTable, FlexTableCell, FlexTableRow} で単純にエクスポートするインデックス ファイルを指します。

webpack プロダクション スクリプトは次のように実行されます。

NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js

Webpack プロダクション スクリプト

私はUMDとAMDが初めてです。Browserify で JS ライブラリを作成しましたが、UMD に出会いました。私の理解では、すべてのモジュールにコードを含めると、モジュールは CommonJs と AMD で使用できるはずです。

これが私のサンプルモジュールです。

./src/main.js

./lib/lib1.js

そして、これがbrowserifyを使用してすべてをパックする方法です

そして、このモジュールを使用したいときは、私はそうします。

私の質問は、CommonJS と AMD の両方に含めることができるように、モジュールを UMD に変換するにはどうすればよいかということです。

巨大なクライアント側アプリを Angular 1.x から Angular 2 にアップグレードしようとしていますが、本当に厄介な障害にぶつかりました。ダミーの軽量プロジェクト (以下に貼り付けたファイル) を使用して問題を再現しましたが、最初に問題について説明させてください。

基本的に、tsconfig.jsonモジュールを として指定するとcommonjs、chrome dev コンソールに次のエラーが表示されます。

app.module.ts:1Uncaught ReferenceError: require が定義されていません

モジュールを に切り替えるとsystem、次のエラーが表示されます。

キャッチされていない TypeError: System.register 呼び出しが無効です。匿名の System.register 呼び出しは、スクリプト タグではなく、SystemJS.import によってロードされたモジュールによってのみ行うことができます。

モジュールを に切り替えるとumd、すべて正常に動作します。しかし、角度自体が の使用を提案していることを考えると、それが正しい答えではないcommonjsことを懸念しています。umdしかし、もし私がそれについて間違っていて、umdまったく問題ないのであれば、その理由について適切な説明を聞きたいと思っています.

私の問題を再現するための私のコードは次のとおりです。

tsconfig.json:

型付け.json:

systemjs.config.js :

パッケージ.json:

app.js :

app.module.ts:

appCtrl.ts :

upgrade_adapter.ts :

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

私はライブラリsurveyjsに取り組んでいます

gulp+webpackを使用して umd バンドルを構築します。

typescript プロジェクトで使用する型定義バンドル (または複数の d.ts ファイル) を作成したいと考えています。私はそのようなものが欲しいです：

Survey.* のすべての内容は、 https ://github.com/dmitrykurmanov/surveyjs/blob/master/src/entries/ko.ts で説明されています。

github.com/SitePen/dts-generatorとgithub.com/TypeStrong/dts-bundleを使用しようとしましたが、成功しませんでした。誰かが私に正しい方向を教えてくれませんか?

angular2 および asp.net コアで ng2-bootstrap を使用しようとしています。

package.json で "ng2-bootstrap": "^1.0.24" を参照します

node_models/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js を参照しようとすると、次のエラーが表示されます

キャッチされないエラー: モジュールは AMD または CommonJS としてロードする必要があります

どうすれば問題を解決できますか? ありがとうマーティン