デフォルトでは、Hugoは正しいコンテンツタイプの.mjsファイルを提供しません。実際、最近までhugoはMIMEタイプごとに複数のファイル拡張子を提供することはできませんでした。これは修正されたv0.43のように見えます。 [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] 全文を読む。 上記のコードでは、正しいMIMEタイプのESモジュール用のmjsファイルを提供できます（メモモジュールは ‘text / javascript’で提供する必要があります）。これはローカルテストにのみ必要です。ホスティングは別の問題です:)
私は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のモジュールを直接使用できます。
If we are to build HTML in Workers then we need some 'DOM' in them.
Templating libraries needn't be so hard
最近のプロジェクトでは、Webプッシュサービスを構築する際に、アプリケーションレベルのイベントに応じてUIを応答させたいと思っていました。システムには依存しておらず、ビジネスロジックとは独立して自分自身を管理できるようにしたいと考えていました。 私は多くのさまざまなツールを見て回っていましたが、NIH症候群が頻繁に起こり、人々が自分たちのインフラストラクチャ要素をかなり早く実装できると思うという事実が頻繁にあるため、サイドPubSubサービス＆mdash;それは私の必要性のためにかなりよく働いた。 カスタムDOMの「イベント」を使用し、DOMが既に開発者に提供している既存のインフラストラクチャを使用する必要があるかどうかを議論しました。 addEventListenerを使ってイベントを処理し、イベントを消費する機能。唯一の問題は、EventTargetで継承または混合するモデルを持つことができないため、DOM要素またはウィンドウからイベントハンドラをハングする必要があることでした。 _ 考え方： EventTargetをオブジェクトとして使用すると、カスタムPubSubシステムを作成する必要がなくなります。 この制約を念頭に置いて、何かをコーディングする意志と私が自分で作ったバグを気にしない傾向があるので、私は大まかな計画を描いた： /* When a user is added, do something useful (like update UI) */ EventManager.subscribe('useradded', function(user) { console.log(user) }); /* The UI submits the data, lets publish the event. */ form.onsubmit(function(e) { e.preventDefault(); // do something with user fields EventManager.publish('useradded', user); }) このすべては新しいものではありません。 Reduxと他の多くのシステムではこれがすでに行われており、多くの場合、状態の管理にも役立ちます。私の頭の中では、私は実際にブラウザに既に状態にseptateモデルを必要とする状態を持っていません。 実装は非常に簡単で、抽象化は私にとっては非常に便利です。 var EventManager = new (function() { var events = {}; this.publish = function(name, data) { var handlers = events[name]; if(!
もう1週間、ChromeのCanaryチャンネルにあるShape API経由の顔検出についてお話しました。現在、バーコードの検出はChrome Canaryでも行われています（Miguelは私のヒーローです）; バーコードは巨大です！彼らは我々が購入するほとんどすべての製品にあります。多くの悪意を持ったQRコードは、米国とヨーロッパ以外の国でも巨大である。バーコードとQRコードは、メディアとあなたとの間で少量のデータを転送することによって、物理世界とデジタル世界をつなぐ簡単な方法を提供します。これはデスクトップの時代には莫大な量の使用ではないかもしれませんが、モバイルの時代にはそれは重要です。このデータにアクセスするためだけにアプリをインストールする必要はありません。 シェイプ検出APIは、ユーザーのデバイスの下にあるハードウェア機能の上に標準インタフェースを作成し、主に顔検出とバーコード検出という新しい機能セットをWebプラットフォームに開くため、面白いです。 バーコード検出APIは、現在WICGにあるShape Detection APIに基づいています。 wicg /）は、インキュベーションおよび実験段階にあることを意味する。 Androidではさまざまな1Dおよび2Dのバーコードを検出できますバーコード： 1D barcodes: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF, Codabar 2D barcodes: QR Code, Data Matrix, PDF-417, AZTEC さらに： It automatically parses QR Codes, Data Matrix, PDF-417, and Aztec values, for the following supported formats: URL Contact information (VCARD, etc.) Calendar event Email Phone SMS ISBN WiFi Geo-location (latitude and longitude) AAMVA driver license/ID Shape Detection APIは現在Chrome Canary（M57）にあり、 chrome：// flags /＃enable-experimental-web-platform-featuresで有効にする必要があります