私はESモジュールについて昨日投稿した投稿を考えています
I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require).
I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:
私は静的なサイトにコンテンツをプッシュするのを簡単にする方法に取り組んできました。もう1つのポストでもっと共有することは楽しい小さなエクササイズでした。この記事では、ほぼすべてのnpmモジュールをJavaScriptモジュールを使用してフロントエンドプロジェクトにインポートするために使用した rollup設定を共有したいと思います。
私はプロジェクトに簡単なモジュール get-urlsを簡単にインポートする必要がありました。モジュールは十分にテストされていて、私が必要なことをしてくれます… JavaScriptの2行で実装するのはかなり簡単だという事実を無視してください。私が持っていた問題は、私のプロジェクトがES6でビルドされ、モジュールを使用していて、CommonJS（ require）を使ってバンドルしたくないということでした。
私はここで何をすべきかについて多くの指針を見つけることができませんでしたので、私は実験に行きました。このソリューションは私が遭遇した解決策です：
1.必要なnpmモジュールをインポートするファイルを作成します。 module.exports = require（ 'get-urls'）;このモジュールはES6スタイルに変換されます。 2.ロールアップ設定を作成します。1.ノードのグローバルと組み込み関数をインポートします。 1.このモジュールの使用に必要なすべてのnpmモジュールを解決します。 1.結果を commonjsプラグインに渡して、JavaScriptモジュール形式になるようにします。 1.巨大なので、出力を圧縮します：\ 3.あなたのプロジェクトに同梱のファイルを含めて喜んでください。
import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import builtins from 'rollup-plugin-node-builtins'; import globals from 'rollup-plugin-node-globals'; import closure from 'rollup-plugin-closure-compiler-js'; export default { input: 'static/javascripts/get-urls.js', output: { file: 'static/javascripts/get-urls.bundle.mjs', format: 'es', browser: true }, plugins: [ globals(), builtins(), resolve({ preferBuiltins: false, browser: true, // pass custom options to the resolve plugin customResolveOptions: { moduleDirectory: 'node_modules' } }), commonjs(), closure({ compilationLevel: 'WHITESPACE', languageIn: 'ES6', languageOut: 'ES6' }) ] }; おそらくこれよりも良い方法があると思いますが、比較的シンプルな関数（70kb）の出力は出力されますが、ここでは自分のページにnpmのモジュールを直接使用できます。
