問題タブ [rollupjs]

最近、rollupjs を使い始めました。利用可能なドキュメントに従ってすべてを構成し、まとめた後、未定義のオブジェクトに関する外部ライブラリから多くのエラーが発生しました。この種のエラー: Cannot read property 'parse' of undefinedcrypto-js から来ています。コード内の次の行について不平を言います: var ciphertext = Base64.parse(openSSLStr). 未定義Base64も同様です。バンドルされているさまざまな外部ライブラリから、このようなエラーはほとんどありません。

いくつかの外部依存関係を使用します: chart.js、crypto-js、mithril、moment、pluralize

それらはすべて と完全に連携しjspmます。現時点ではjspmが非常に遅いため、速度を上げるためにロールアップを試すことにしました。これで、外部依存関係の半分が機能しなくなりました。「未定義のもの」および「...関数ではありません」という種類のエラーが外部ライブラリからのみ発生します。

何が原因である可能性がありますか？

これは私のrollup.config.jsです

他に詳細が必要な場合はお知らせください。

ありがとう。

編集

アプリケーションでエラーを生成するライブラリをバンドルして、簡単なテスト再現を行いました。

パッケージ.json

rollup.config.js

main.js

アプリケーション.js

上記を実行するとエラーが発生します。

GitHub の Electron を使用してアプリを作成しました。モジュールをロードする推奨される方法、次の ES6 構文を使用しています。

import os from 'os'

定型文をダウンロードした後、アプリは正常に動作しています。background.jsファイルにスクリプトを問題なくインポートできました。以下は、カスタムモジュールをロードする方法です。

import { loadDb } from './assets/scripts/database.js';

しかし、clipboard.htmlElectron 内で新しいブラウザー ウィンドウ ( ) を開くと、JavaScript ファイル ( ) が読み込まれ、モジュールclipboard.js化が試行されます。importこの時点で、Unexpected token importエラーが発生しています。

私のclipboard.html：

私のclipboard.jsファイル:

繰り返しになりますが、アプリのメイン ウィンドウである 内で同じコードが使用されてapp.htmlいますが、これはエラーになりません。

メイン ウィンドウが、ウィンドウが初期化していないもの (おそらく「ロールアップ」?) を初期化しているように感じますがclipboard.html、アプリのコード内にこれを示唆する明示的な記述はありません。

ractiveとractive-loadをロールアッププロジェクトにインポートする正しい方法は何ですか? npmまたはgithub？

現在、npmを使用してそれぞれをインストールしています。

と

そして、私はそれらを正しくバンドルするためにrollup-plugin-commonjswith を使用しています（質問の最後にあるrollup.config.js）：rollup-plugin-node-resolve

しかし、ractive-load はそのコードに他のモジュールもインポートしているようで、このエラーが発生しています:

Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js

ロールアップを正しく使用するにはどうすればよいですか? また、この場合の適切なソース (npm または github) はどれですか?

これが私のものrollup.config.jsです：

最新(この記事の執筆時点では 2.4.3)/vendorを使用して構築された EmberJS プロジェクトのディレクトリの下に ES6 ライブラリ "foo" があるとします。ember-clifoo が複数のファイル ( 、 など) を持つライブラリでbar.jsありbaz.js、それらすべてが何かをエクスポートするとします。

、などを取りvendor/foo/bar.js、vendor/foo/baz.jsそれらを配布ファイルにバンドルしたいと思います。たとえばvendor/foo/dist/foo-bundle.js、次のようにしてEmberにインポートできます。

これは、バンドラーおよび/またはトランスパイラー ( Babelなど) で可能であるように見えますが、どのツールをどの組み合わせで使用する必要があるかは明確ではありません。Ember には、ember-cli を介して私がやりたいことを行うための組み込みツールがありますか? webpack、browserify、またはrollupなどの外部バンドラーを使用する必要がありますか?

一般的に、JavaScript ツールの周りには多くのノイズがあるようで、この問題に対してどのような選択肢があり、それらを適切に活用する方法を理解するのが難しくなっています。どんな援助でも大歓迎です。

参考になりそうなメモ…

これまでにいくつかのことを試しました：

main.jsEmberJS が依存関係ツリーをたどり、ステートメントで参照された他のファイルをインポートすることを期待して、ファイルのインポートだけを試みましたimport。これはmain.jsファイルのみをインポートし、他の依存関係はインポートしませんでした。

broccoli-es6modulesを調べたところ、実行時にエラーが発生しましたが、ロールアップを支持して廃止された esperanto も使用しています。

また、ロールアップを直接使用してみましたが、成功の度合いはわずかでしたが、多くの場合、bundle.js出力が空で、bar.jsまたはbaz.jsからのコードが含まれていません。これは、エントリ ポイントにインポートしただけだからです (例main.js):

main.jsコードを呼び出す関数が含まれているかbar、baz空のバンドル以上のものを取得しているかどうかを確認しましたが、foo がサードパーティ ベンダーからのスクリプトのコレクションであり、量を除けば、「アプリケーション エントリ ポイント」を持たない場合マニフェストファイルのようなものに、ロールアップは私が探しているものに対して間違った選択であるようです.

再度、感謝します！

CommonJS で記述されたすべてのモジュールと、ジェネレーター、let、const などの es6 機能を使用する一部の Node.js アプリがあります。これはすべてそのままで正常に動作します。

これらすべてのファイルを 1 つのファイルにまとめてから、それを醜くしたいと考えています。必要な手順は次のとおりです。1) すべてのモジュールを es6 モジュールに変換します - Babel を使用します。2) ロールアップを使用してバンドルを作成し、CJS ファイルとして出力します。3) この CJS ファイルを醜くします。

私はロールアップとバベルで遊んで、https: //duske.me/easy-es2015-compilation-with-rollup-js-and-gulp-js/ などの記事を読みました。これは、入力モジュールが既に es6 の場合に正常に動作しますモジュール。そして、私はhttps://github.com/rollup/rollup-plugin-babelを見てきましたが、バベルやロールアップなどの経験があまりないので、苦労しています.

私は d3 v4.0 のアルファ版を試しており、jspm セットアップ内でカスタム ビルドを作成しようとしています。新しいモジュラー ビルドがどのように動作するように意図されているかについて、頭が回らないようです。

モジュールから名前付きエクスポートをインポートする場合、つまり d3-request からの json をインポートする場合は、次の手順を実行できます: import {json} from "d3-request";jspm/npm 経由でモジュールをインストールした後。

ライブラリ全体をインストールしたい場合は、同様にimport d3 from "d3";

複数のモジュールと名前付きエクスポートをインストールし、それらすべてを d3 名前空間で使用できるようにしたい場合 (つまり、d3-request とともに d3-shape をインポートし、同じ d3 グローバルで d3.json と d3.line にアクセスできるようにする) 、これの正しい構文は何ですか?

d3_shapeこれらのモジュールのスタンドアロン バージョンを使用すると、 などのグローバルがエクスポートされることに気付きました。これは、これらのモジュールをアプリケーションにバンドルするときに、モジュールごとに個別の名前空間を持つという意図ですか?

私はES6モジュールをインポートするmain.jsファイルを持っています。これは、他のモジュールにも依存しています。そして、rollup.js を使用して、すべてのモジュールを 1 つのファイルにまとめます。

main.js が依存しているすべてのファイルのリストを取得するにはどうすればよいですか?

このリストを gulp.watch で使用して、ロールアップ タスクを自動的に実行し、モジュールが変更されるたびにバンドルを更新したいと考えています。/js ディレクトリ全体を監視できることはわかっていますが、より具体的にする方法はありますか?