タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード ESM は非同期 ESM は静的解析可能 Node.js の ESM 対応について Dual Package（CJS/ESM）に対応した npm パッケージの開発 Conditional Exports によるファイルの指定 .mjs と .cjs require など CJS 特有の機能を使う ESMから CJS ファ
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJS 形式 (module.exports / require() ) ブラウザ環境で、webpackやRollupなどのモジュールバンドラーを前提とするならば CommonJS や ES Modules 形式 (export / import ) ブラウザ環境で、モジュールバンドラーなどは使わず<script>タグでファイルを読み込んで利用するならば UMD 形式 このとき、パッケージ提供側はどういったファイルをパッケージに含めるべきなのか、またそれを TypeScript でどのように実現できるのかがあまりよくわかっていなかったので
今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir
ブックマークサービスQiNeel関連の記事や身の回りのよしなしごとをそこはかとなく書きつくっています。 コロナの影響で中止となった幻のTSConf 2020で、TypeScriptとES Modulesについて登壇する予定でした。 最近のTypeScriptは、モジュール関連で新たな仕様が出てきたようなので簡単にまとめておきます。前職同僚でNode.js Core Collaboratorのshisamaおよびdeno-ja Slackコミュニティーからの情報を勝手に集約しました。みなさんありがとうございます。 背景 JavaScript同様、TypeScriptでもimport構文（ES Modules）をサポートしています。しかし、ES ModulesではCommonJS形式のrequire()と異なり拡張子を省略できないという制約があります。 フロントエンド開発では、ほとんどの場合で
Starting version 13.2.0, Node.js has stable support of ES modules. In this post, you'll learn how to enable and use ES modules in Node.js. 1. Enabling ECMAScript modules in Node.js The default format of modules in Node.js is the CommonJS. But Node.js will treat a JavaScript file as an ECMAScript modules format if: The module's file extension is .mjs Or the module's nearest parent folder has { "typ
記事執筆時点での最新版の Node.js では、モジュールシステムとして ES Modules を使うことができる。 また、CommonJS で書かれたモジュールを ES Modules で読み込むこともできる。 Node.js のモジュールシステムは複雑すぎて苦手意識があったので、整理した。 この記事の内容は、Node.js のv14.7.0で動作確認している。 Node.js のモジュールシステムはバージョン毎に挙動が大きく変わるので、注意が必要。 そのファイルは CJS なのか ESM なのか Node.js で使えるモジュールシステムとして、ES Modules（以下、ESM）の他に CommonJS（以下、CJS）があり、CJS がデフォルトになっている。 Node.js におけるモジュールシステムを理解するためにはまず、Node.js が各ファイルをどのモジュールシステムとして
Amazon Web Services（AWS）は、サーバレスコンピューティング基盤として提供しているAWS Lambdaで、Node.js 14のランタイムにおいてJavaScriptのモジュール機能であるES Modulesのサポートを開始したことを発表しました。 AWS Lambda now supports ES Modules and Top-Level Await for Node.js 14 AWS Lambda functions using the Node.js 14 runtime now support code packaged as ECMAScript modules, allowing Lambda customers to consume a wider range of JavaScript packages in th... https://t.co/
ブラウザにおける ES Modules の利用とパフォーマンスについて - 30歳からのプログラミング
現代の主要なブラウザでは、ES Modules（以下、ESM）を利用することができる。 つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。 モジュールシステムをそのまま使えるので、複数のファイルをバンドルする必要もない。 この記事ではまず、ブラウザで ESM を使う方法について説明していく。 その後、処理の流れを詳しく確認していく。これを理解していないと、パフォーマンスが非常に悪いページになってしまう恐れがある。 動作確認は Google Chrome の84.0.4147.105で行っている。 ESM 利用の基本 まずは検証用にサーバを立てる。 以下のコードを Deno（バージョンは1.2.2）で実行する。 そうすると、http://localhost:8080/にアクセスしたときにindex.ht
babel-plugin-node-cjs-interop というパッケージを作ったのでその紹介です。 (GitHub) 何が問題か Node.jsのネイティブES ModulesサポートとBabelやTypeScriptのES Modulesサポートを併用したときに問題が起きます。 ESMとCJS JavaScriptには標準のモジュールシステム (ES Modules, ESM) がありますが、ESMの策定前に先だっていくつかのコミュニティー定義のモジュールシステムが存在していました。そのうちNode.jsを中心として使われていたのがCommonJS Modules (CJS) です。そのNode.js界隈でもESMへの移行が進んでいます。 移行にあたって問題になることのひとつが、ESMとCJSのエクスポートモデルの違いです。 ESMでは、モジュールは0個以上の名前つきエクスポートを定
Chrome 80 から Web Worker (Dedicated Worker) で ES Modules が使えるようになります。本記事はその宣伝です。 前提知識 ES Modules って何？ ざっくりいうとスクリプトファイルをモジューラブルに読み込む仕組みです。 他の方が解説した記事がいっぱいあるのでそっちを見てください。 Web Worker って何？ ざっくりいうと Web でスレッドを使うための API です。 MDN の解説（これとかこれ）を読むか、詳しく知りたい人は「JavaScript のスレッド並列実行環境」を読んでください。 スクリプトファイルの読み込みについては以前「JavaScript のスクリプトインポートを正しく使い分けようという話」に詳しくまとめたのでそちらも併せて読んでください。 使い方 Dedicated Worker で ES Modules (M
CommonJSとES Modulesについてまとめる
モチベーション 普段フロントエンドを領分にしているのになかなかこのあたりの基礎が足りていないと感じることが多いので、なんとかしたい。 ES Modules方式でしか対応されていないライブラリを使おうとしてコケたので色々調べたのも含め、まとめていく。 ちなみにその辺りについてはこの神記事見ると良い。 個人的に気になっているモジュールシステムについて掘り下げていく。 CommonJS CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。 from Wikipedia 例えばNode.jsで使われている。 Node.jsはデフォルトで全てのモジュールをCommonJSで扱うが、Node.jsは最近のバージョンでES Modulesに対応するなどしていて、潮流はES Modulesに流れつつある。 後述する
es-modules-are-terrible-actually.md ES Modules are terrible, actually This post was adapted from an earlier Twitter thread. It's incredible how many collective developer hours have been wasted on pushing through the turd that is ES Modules (often mistakenly called "ES6 Modules"). Causing a big ecosystem divide and massive tooling support issues, for... well, no reason, really. There are no actual
iframe の中で ES Modules のコードを評価する
rollup のような ESM を吐くツールのプレビューツールを作っていると、文字列として組み立てたコードを安全に評価したいことがあります。 方法 iframe を createObjectURL dynamic import で data uri として文字列を評価 得られた関数を実行 コード // これを評価したい const code = `export default () => { console.log("xxx") }`; // 追記:2020/06/24 ユニコード文字対応 const encoded = btoa(unescape(encodeURIComponent(code))); const blob = new Blob( [ `<!DOCTYPE html> <html> <head> </head> <body> <script type=module> im
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
ES modules in service workers Stay organized with collections Save and categorize content based on your preferences. Background ES modules have been a developer favorite for a while now. In addition to a number of other benefits, they offer the promise of a universal module format where shared code can be released once and run in browsers and in alternative runtimes like Node.js. While all modern
Core: Migrate from AMD to ES modules 🎉 by mgol · Pull Request #4541 · jquery/jquery
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
Publishing Node modules with TypeScript and ES modules - LogRocket Blog
Editor’s note: This article was last updated by Ikeh Akinyemi on 1 May 2023 to include information about TypeScript module exports and how to import modules that were previously exported. For further reading, check out our post “How to organize code in TypeScript using modules.” TypeScript has become a very popular language to write JavaScript in, and for good reason. Its typing system and compile
Node.js v12のES Modulesと、Babel/TypeScriptの対応について - Qiita
本日は誕生日です。みなさんプレゼントありがとうございます。まだの方は急いでください。 あと年齢は聞かないでください。 はじめに Node.js v12で変更されるES Modulesの挙動についてと、Babelでの対応方法についての記事です。 10月に開催された関西Node学園 8時限目で発表した内容＋α（後日談含む）です。 対象者 ES Modules（import構文）は知ってるけどNode.js v12で何か変わったの？ 非対象者 v12での変更点もちゃんと知ってるし！ そういう強い子は、この記事本文はスルーしてもいいので最後にある「おまけ」だけでも見てください。 ES Modulesって何？ ていうかJavaScriptって何？ この記事のゴール Node.js v12におけるES Modulesの変更点について理解し、適切なコードを書けるようになる Babelを使っている場合は適
なぜJavaScriptには2つもモジュールシステムが混在しているのですか？(ES ModulesとCommonJS) · Issue #527 · yytypescript/book
これをお読みの皆さんの中には、JavaScriptやTypeScript以外のプログラミング言語を経験したことがある人もいるかと思います。他の言語で、複数のモジュールシステムが共存している言語を使ったことはありますでしょうか。 JavaScriptには、系統が異なるモジュールシステムが、少なくとも2つ存在しています。ESモジュールとCommonJSです。こうした状況は、プログラミング言語としては、珍しいことです。JavaScriptのモジュールまわりを理解するのを難しくしている要因でもあります。 では、どうしてJavaScriptは2系統もモジュールシステムを持つようになったのでしょうか？ ここでは、JavaScriptの現状に至る流れを歴史からひも解いていきます。 ひとつめのモジュールシステム JavaScriptのモジュールシステムは、ブラウザよりも先んじて、サーバーサイドJavaSc
Using Node.js ES modules and top-level await in AWS Lambda | Amazon Web Services
AWS Compute Blog Using Node.js ES modules and top-level await in AWS Lambda This post is written by Dan Fox, Principal Specialist Solutions Architect, Serverless. AWS Lambda now enables the use of ECMAScript (ES) modules in Node.js 14 runtimes. This feature allows Lambda customers to use dependency libraries that are configured as ES modules, or to designate their own function code as an ES module
Node Modules at War: Why CommonJS and ES Modules Can’t Get Along
Dan Fabulich is a Principal Engineer at Redfin. (We’re hiring!) In Node 14, there are now two kinds of scripts: there are old-style CommonJS (CJS) scripts and new-style ESM scripts (aka MJS). CJS scripts use require() and module.exports; ESM scripts use import and export. ESM and CJS are completely different animals. Superficially, ESM looks very similar to CJS, but their implementations couldn’t
Import JSON in ES modules
2 min read This blog post is part of What’s new in Node.js core? March 2022 edition. We’ve had really good ECMAScript (ES) module support in Node.js for a while, but up until now we’ve had to do messy little workarounds to import JSON files. The background on why is a blog post in itself, but the good news is that we can now import JSON modules in Node.js without an experimental flag. This recentl
GitHub - tc39/proposal-import-attributes: Proposal for syntax to import ES modules with assertions
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - guybedford/es-module-shims: Shims for new ES modules features on top of the basic modules support in browsers
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
JSer.info #451 - TypeScript 3.6が正式にリリースされました。 Announcing TypeScript 3.6 | TypeScript 基本的にはβ、RCからの大きな変更はありませんが、Generatorsの型チェック改善、--downlevelIterationフラグでArray Spreadの仕様に合わせた変換の改善、Promiseの型エラーの改善ながお行われています。 破壊的な変更としてはlib.dom.d.tsのglobalThisに関する変更、GlobalFetchの削除、experimental-webglが削除されwebglとwebgl2を使うように変更なども行われています。 また、TypeScript playgroundが https://typescript-play.js.org/ ベースのものに刷新され、 TypeScriptのオプ
はじめに この記事は、2022年におけるTypeScript製ES Modulesの作成方法を解説、共有するためのものです。 node.jsにおけるCommonJSの歴史は長く、それに関する記事が大量にあります。どの設定がCommonJSに関わり、どの設定がES Modulesに関わるのかを読み解くには労力がかかります。この記事ではPure ESM作成の最小限構成を通して、ES Modulesの設定を整理します。 想定する読者 JavaScript、TypeScriptの開発経験者 node.jsおよびnpmの基礎的な知識がある CommonJSのサポートは考えず、新規にPure ESMのパッケージを開発したい 想定する環境 node.js v16.18.0 ~ v18.11.0 TypeScript v4.8 node.jsのメジャーバージョンが更新された場合、この記事のレシピは適用でき
Meta: Native support for ES Modules · Issue #9430 · jestjs/jest
EDIT: quick guide for getting started: https://jestjs.io/docs/ecmascript-modules ESM support will be unflagged in a future release of Node 12 (maybe not before April nodejs/node#29866 (comment)) and it is already unflagged in Node 13.2, so I think it's time to evaluate how we can add native support in Jest. I'll try to list which features Jest currently provides that are impacted by ESM support, a
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s note: This article was updated on 3 March 2021. Introduction “Before software can be reusable, it first has to be usable.” – Ralph Johnson Modules are independent building blocks of a software program. They are basically a design pattern that implements features of modular design in
GitHub - azu/module-example: An example package for ES Modules written by TypeScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Alternatives to __dirname in Node.js with ES modules - LogRocket Blog
Sam Thorogood Sam is a former Googler, now CTO of the Australian energy startup Gridcognition, with an interest in all things web. So, you’ve listened to all the advice and sat down to migrate your code or learn a new standard, but you have questions. ES modules (also known as ESM) are here, but using them is not quite as simple as migrating all your require() expressions into import statements. E
Google Apps Script の Web アプリで CORS 制約を回避して Web Woker や ES Modules を使う
<!-- 前略 --> <script type="module"> import { module } from "https://xxx/module.js" cosnt worker = new Worker( "https://xxx/worker.js" ) </script> <!-- 後略 --> 開発コンソールで確認してみると「CORS」や「SOP」といった文言のエラーメッセージが出ていると思います。 CORSはオリジン間リソース共有、SOPは同一生成元ポリシーのことで、ざっくり言うと「他のWebサイトから持ってきてはいけない」というエラーです。 つまり、他所から持って来ていないように見せれば解決します。 失敗例 ContentServiceを使ってみる 同じ失敗をしないため、まずは失敗例の紹介から。 GASにはHTMLを表示するHtmlServiceに対してプレーンテキス
TypeScript + Node.js + ESM + Jestの組み合わせを調査する。 調査すること ES Modulesをts-jestで問題なく実行できるか？ 実験コード 実験のために書いたコードはGitHubに置いてある suinplayground/typescript-nodejs-esm-jest
Migrate from Service Workers to ES Modules · Cloudflare Workers docs
Migrate from Service Workers to ES ModulesThis guide will show you how to migrate your Workers from the Service Worker Open external link format to the ES modules Open external link format. Advantages of migratingThere are several reasons to migrate your Workers to the ES modules format: Many products within Cloudflare’s Developer Platform, such as Durable Objects, and other features of Cloudfl
JSer.info #463 - 開発版となるNode.js 13.2.0がリリースされました。 Node v13.2.0 (Current) | Node.js 今までは--experimental-modulesというフラグ付きで起動したときのみ、ECMAScript Modulesをサポートしていました。 13.2.0からはこのフラグなしでも、デフォルトで拡張子が.mjsのファイルやpackage.jsonの"type"フィールドが"module"となっているパッケージをECMAScript Modulesとしてimportできるようになりました。 ECMAScript Modules | Node.js v13.2.0 Documentation Announcing core Node.js support for ECMAScript modules 次のようなサンプルコードで
ES modules are still reasonably new in Node.js land (they're stable since Node 14). Modules come with a built-in module system, and features such as top-level await. I read an informative post on ES modules by Pawel Grzybek and learned that you can't import JSON files in ES modules today. /* Experimental JSON import in Node.js $ node index.mjs */ // An import assertion in a static import import in
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む
最近のTypeScriptのES Modules対応事情
How to Use ES Modules in Node.js
Node.js における ES Modules を理解する - 30歳からのプログラミング
AWS LambdaがES Modulesをサポート開始
Node.jsのネイティブES Modulesサポートが抱える問題を解決するBabelプラグインを書いた
Chrome 80 から Web Worker (Dedicated Worker) で ES Modules が使えます
ES Modules are terrible, actually
Chrome 80, Content Indexing, ES Modules and More
ES modules in service workers | Articles | web.dev
2019-09-03のJS: TypeScript 3.6、Feathers 4(Node.jsフレームワーク)、ES ModulesをProductionで使う方法
2022年度のTypeScript製ES Modulesレシピ - Qiita
Using ES modules in Node.js - LogRocket Blog
TypeScript: JestでES Modulesは問題なくテストできるのか？
2019-11-26のJS: Node.js 13.2.0(ES Modules)、jQueryがAMDからES Modulesへ
How to import JSON files in ES modules (Node.js)
minichamps-world.com
nordot.app
www.afpbb.com
www.kobe-np.co.jp
www.kobe-np.co.jp
touchpaynavi.com