esm-package.md Pure ESM package The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS. This means you have the following choices: Use ESM yourself. (preferred) Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide. If the package is used in
今まで知らずにいたnpmスクリプトでできる3つのこと
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
Napierを動くようにしようと思って、80も443も開いてないインスタンスに置きました。 いくつか不備があったのでそれは修正中です。 と言うのは良いとして、表題のようなことになってしまいました。 通常、何かウェブアプリを作った時は、直接サービスで使うポート(80とか443とか)を開かないで、ロードバランサやプロキシで受けて、それを適当なポートにマッピングします。 その方が後からいろいろいじりたい時に楽だったりしますし、スケールさせたい時に都合が良いからです。 とは言え、Napierはプロキシなので、自分で直接port 80や443を開きたいと考えました。変にロードバランサやプロキシを通すと、あれやこれやで面倒臭いことになるからです。 UNIX系OSを使っている人にとっては、一般ユーザがwell-known portを開こうとするとEACCESSになるというのは常識です。 そんなことは言わ
2月3日、Denoは「Deno in 2023」と題した記事を公開した。昨年（2023年）一年間においてDenoがどのような進化を遂げたかを解説している。 2月3日、Denoは「Deno in 2023」と題した記事を公開した。昨年（2023年）一年間においてDenoがどのような進化を遂げたかを解説している。以下に内容を抜粋して紹介する。詳細は元記事を参照していただきたい。 Nodeとnpmとの互換性強化 Denoは2023年の改善を経て、Nodeの組み込みAPIをサポートし、npmモジュールの読み込みに対応した。これによりNodeとの互換性が向上し、既存のNodeプロジェクトをスムーズにDenoに移行できるようになった。 シンプルで高速なWebサーバー Deno.serve() Denoが導入したDeno.serve()関数により、Webサーバーの作成が大幅に簡略化された。イベントループ
米Microsoft傘下のGitHubは3月16日（現地時間）、JavaScriptのパッケージ管理システム「npm」をオープンソースで提供する米npm, Inc.を買収することで合意に達したと発表した。買収総額などの詳細は公表されていない。買収完了後もnpmのパブリックレジストリは無料で提供を続ける。 npm, Inc.は、エンジニアのアイザック・シュリューター氏が2009年にオープンソースで公開したnpmを持続させるために2014年に立ち上げた非公開企業。 npmは、サーバ側で動作するJavaScript「Node.js」を使うパッケージを管理するツール。パブリックレジストリは現在、1カ月に750億回ダウンロードされており、約1200万人の開発者が130万以上のパッケージを利用している。この他、有料のレジストリも提供している。 GitHubは公式ブログで、この買収により、npmの高速性
GitHub Actionsでactions/setup-nodeだけでnode_modulesをキャッシュできるのか試してみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 GitHub Actionsでは、CI/CDでよく使われる処理がActionsとして公開されており、Workflow内で自由に使うことができます。 GitHub Marketplace · Actions to improve your workflow 今回は、actions/setup-nodeを使用してWorkflowの実行時にnode_modulesをキャッシュできるのか試してみました。 actions/setup-nodeとは actions/setup-nodeを使用すると、指定したバージョンのNode.js distributionのダウンロードおよびキャッシュをしたり、npm/yarn/pnpm dependencyをキャッシュしたりすることができるようです。 actions/setup-node: Set up your
{ "name": "lib-a", "version": "0.0.0", "type": "module", "main": "dist/index.js", "scripts": { "build": "rm -rf dist && tsc" } } この場合、lib-a の src/index.ts を変更だけしても lib-b には反映されません。なぜなら lib-b は lib-a の dist/index.js を参照しているため、build を実行して dist ディレクトリの中を更新する必要があるからです。 またこのときに tsserver の機能を使って lib-b から lib-a の参照にジャンプしても src/index.ts に飛ばないという問題点もあります。 解決策 問題の原因は依存元の lib-a の main に build によって生成されるファイルへの
GitHub - visible/visible: 🦉 Accessibility testing framework at the next level
🔎 Validation ― Visible can run fully automated validation based on the web standard ACT (Accessibility Conformance Testing) just by putting the URL. The result always comes out with highlighted codes and detailed messages so you can immediately start fixing the problem. 🤖 Suggestion ― Unlike other test tools, we also provide suggestions that may help you to understand the a11y more. Suggestions
Create modern(es2015+) web apps easily with NPM packages in browser/deno.No build tools needed!import confetti from "https://esm.sh/canvas-confetti@1.6.0" esm.sh is a modern CDN that allows you to import es6 modules from a URL: import Module from "https://esm.sh/PKG@SEMVER[/PATH]"; or build a module with custom input(code): import { esm } from "https://esm.sh/build"; const { render } = await esm`
freeeプロジェクト管理でJavaScriptバンドルサイズ削減に取り組んだ話 - freee Developers Hub
こんにちは！ 中部オフィスでエンジニアをやっているichienです。 5月に入社してfreeeプロジェクト管理の開発を担当していました。 今回はfreeeプロジェクト管理のJS(JavaScript)バンドルサイズを削減した話を紹介します。 改善前はバンドルしたJSファイルが5MB以上に肥大化しておりダウンロードに数秒かかっていました。 その分、ファーストビューの表示もその分遅くなり、ユーザ体験に課題がありました。 今回は次の3つの施策を実施して、5MB→1.7MBまで削減し、ダウンロード時間も70%短縮できた話をします。 gzip圧縮の適応 webpack-bundle-analyzerで現状の可視化と削減対象の決定 不要な日付・祝日データの排除 また、今回の取り組みは一度にすべて対応したわけではありません。次の様にstep-by-stepで進めることを意識しました。 現状を可視化し理解
Minimal Blog
宣伝: YouTubeで初心者向けの配信をしています。よかったら覗いていってね😉 概要あなたは普段、何気なく npm install を使っていることでしょう。 しかし、 npm install が何をしているのか、実は誤解している人も多いと思います。 記事のタイトルは釣りではないので、どんな時に npm install は問題を起こすのか、説明できない人は以下を読み進めてください。これは多くの開発者が無意識に無視している、とても重要な事項だと思っています。 なお、npm 4.x系以下の方は本記事の対象ではありません。 追記: 強めに書きすぎて誤解を招く部分があったので何度か修正しています。 参考資料:npm installnpm ci npm はパッケージマネージャです。パッケージマネージャは、開発に必要なパッケージ（ライブラリとか、プラグインとか色々）を管理するためのツールです。全て
Popular NPM library hijacked to install password-stealers, miners
HomeNewsSecurityPopular NPM library hijacked to install password-stealers, miners Hackers hijacked the popular UA-Parser-JS NPM library, with millions of downloads a week, to infect Linux and Windows devices with cryptominers and password-stealing trojans in a supply-chain attack. The UA-Parser-JS library is used to parse a browser's user agent to identify a visitor's browser, engine, OS, CPU, and
(元)データサイエンティストらしく、見える化をしてみたって話 - ecbeing labs（イーシービーイング・ラボ）
この記事は前回（TSTSTS）の続きです。 前回の記事は ↓↓↓↓↓こちら↓↓↓↓↓ blog.ecbeing.tech はじめに ブンブンHello World. 最近はフロントエンドよりのコーディングにハマりつつある開発です。 どうせフロントエンドやるなら、見た目に凝った何かを入れたい。 だってフロントエンドだもの。 そんな感じで今回は、実行結果をグラフにしてそれっぽい感じにする方法をまとめたいと思います。 見える化、出来ていますか？ はじめに 前回までのあらすじ TS入門してみた 課題点 vue-chartjs Vue.js vue-chartjs 何はともあれ実装 環境構築 vue-chartjsのコーディング 合☆体 結果 おわりに 前回までのあらすじ 多くの方にご覧いただけいるようで、感謝の極みです。 前回の記事を簡単に一言で説明すると、TypeScriptに入門してみました。
Deno アドベントカレンダー 24日目の記事です。 今日は Deno を使って Node でも Deno でも動くライブラリ(もしくはツール)を作成する方法を紹介します。 Deno 界隈では最近 npm 互換性機能がリリースされて、Deno から使えるツールが一気に増えたということで話題になっていますが、逆に Deno で作ったツールを Node/npm に対応させるという逆向きの互換性についても開発が進んでいます。 この記事では、Deno が公式で提供している dnt というツールを使う方法を紹介します。 dnt を使った場合の、Node と Deno 両対応の主な流れは次のようになります。 まずは Deno で動くようにツールを作る (Deno に対応) dnt を設定して、ツールのエントリーポイントを Node 用に変換出来るように準備する dnt を実行して Node 用モジュー
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
ミニマルなモーダルライブラリをnpmで公開しました
ミニマルなモーダルライブラリ(MinimalModal.js)を自作してみたので紹介します。 MinimalModal.js とは 🤔 TypeScript で作成された、軽量かつ最小限の機能のモーダルライブラリです。 なんでこのライブラリ作ったの？ 🤔 Micromodal.jsを使おうと思ったのですが、 背景スクロール無効がなかったり、IE 未対応といったところが私の用途には合わなかったため、 いっそのこと作ってしまったほうが早いかなと考え、作ってみました。 機能 😋 モーダル用エレメントの open 属性の有無、及び aria-hidden の true/false の切り替え (開閉のアニメーションは CSS で実装) 背景をクリックまたは ESC キー押下でモーダルを閉じる。 (HTML の実装次第で背景クリックでも閉じないようにできる) タブキーのフォーカス移動でモーダル
JSR is designed for TypeScript. You publish TypeScript source, and JSR handles generating API docs, .d.ts files, and transpiling your code for cross-runtime compatibility. JSR packages are distributed as web-standard ECMAScript modules. JSR isn't a replacement for the npm registry; it's a superset of npm. JSR modules can be used with any JavaScript package manager, and in any project with a node_m
npm workspacesで、TSファイルを共通モジュールとして使い回す | Memory ice cubes
ということをやりたくて、こうやったらできたという覚書。 やりたいこと こういうモノレポ構成とする。 - package.json - package-lock.json - packages - shared - app1 - app2 で、app1にあるコードベースを@myapp/app1とした場合、@myapp/sharedに置いたTSファイルを、そのままモジュールとして利用したいとする。 import { foo } from "@myapp/shared"; import { bar } from "@myapp/shared/bar"; // This is @myapp/app1 or @myapp/app2 code @myapp/app1と@myapp/app2は、それぞれ独自のコードベースになってて、それぞれtscではなくviteやesbuildなどのバンドラーを使う前提
概要 npmプロジェクトで利用しているnpmパッケージ(依存パッケージ)でvulnerability(脆弱性)が見つかったときの対処フローについて記載します。 （GitHub等が親切に"We found potential security vulnerabilities in your dependencies."のように通知してくれるので便利）
最近作っている amdx という markdown コンパイラとそのツール郡を紹介します。 GitHub はここ mizchi/amdx このサイト自体も、 amdxg というツールで作られています。 ゴールをどこに設定したか パフォーマンスを突き詰めると、ブログは静的サイトジェネレータで AMP 対応するのが一番と考えた next.js/SSG export + AMP が便利だったので、next.js 上でコンパイルすることを前提に、静的解析を行う webpack loader を作ることにした mdx の parser を借りて、 .mdx をロードすると React Component として振る舞いつつ、他の mdx を import できると、長い文章を書くときにファイル分割できて便利なのでは Markdown プレビュー高速化+ランタイム最小化のために、AST(JSON) 生
GitHub - Yord/shargs: 🦈 shargs is a combinator library for building command-line argument parsers.
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
Face and hand tracking in the browser with MediaPipe and TensorFlow.js
Posted by Ann Yuan and Andrey Vakunov, Software Engineers at Google Today we’re excited to release two new packages: facemesh and handpose for tracking key landmarks on faces and hands respectively. This release has been a collaborative effort between the MediaPipe and TensorFlow.js teams within Google Research. Try the demos live in your browserThe facemesh package finds facial boundaries and lan
Node.js コアモジュールの import/require には `node` schemeがつけられる - from scratch
Node.js アドベントカレンダーの 3 日目の記事です。空きを埋める形で始めました。 qiita.com www.codegrid.net CodeGrid でも書かせていただきましたが、 Node.js で ES Module / CommonJS を使ってコアライブラリのロードをする際、 node から始まる scheme を付けることが可能になっています。 nodejs.org // ESM import fs from "node:fs/promises"; // CJS const http = require("node:http"); これにはいくつかのメリットがあります。基本的につけておくことが望ましいです。 今回はメリットをいくつか紹介します。まだこれがデファクト・スタンダードになっている訳ではありませんが、これから付けてもらうように推奨していきたいと思います。 メリ
Release: Yarn 4.0 🪄⚗️ | Yarn
Today is the day! After more than a year of work, our team is excited to finally put a fancy "stable" sticker on the first release from the 4.x release line! To celebrate, let's make together a tour of the major changes; should you look for a more itemized list, take a look at the changelog. Breaking ChangesHere's what you need to know when upgrading from 3.x projects: We now require Node.js 18+.N
GitHub - steveruizok/perfect-arrows: Draw perfect arrows between points and shapes.
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
3 行で Node.js >= v14.14.0 であること rimraf dist は node -e 'fs.rmSync(`dist`, {recursive:true, force:true})' で置き換えられる rimraf dist/*.bundle.js みたいな glob を含むものは置き換えできない 長い説明 npm scripts で不要なキャッシュやビルドの出力ファイルを削除したい場合は rimraf というパッケージを POSIX の rm -rf の代わりに使うことが多いと思います。これは Windows で npm run の実行に使われる コマンドプロンプト (cmd.exe) に rm がないのを始めとした環境依存の問題を避けるためです。 とはいえパッケージなしではディレクトリの再帰的削除もできない、というのはちょっと困るので、v12.10.0 で fs.
GitHub - smeijer/unimported: Find and fix dangling files and unused dependencies in your JavaScript projects.
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
npm installとnpm ciの動作確認を簡単にやっておいた - Mitsuyuki.Shiiba
先週、npm installとnpm ciについて調べて考えたことを書いたのだけど、ドキュメントを読んで、頭の中で考えたことをまとめただけなので、これだけだとちょっと気持ち悪いなと思って。簡単ではあるけど実際の動作を確認することにした。 bufferings.hatenablog.com 結果 だいたい想像どおりだった。今回のサンプルプロジェクトで実験した結果は次のとおり。 (1)と(2)は、キャッシュがない場合のnpm ciとnpm installの速さ。想像では「npm ciの方が多少速いのかな？」と考えていたけどほぼ同じだった。node_modulesがない状態から始まるので、npm ciはnpm_modulesを削除する必要がない。一方で、npm installも既存のnode_modulesをチェックする必要がなくて、package.jsonとpackage-lock.jsonの
Tauri Mobile - Develop mobile apps with JavaScript and Rust
2/28/2023Tauri Mobile - Develop mobile apps with JavaScript and Rust#code#vue#rust Studio Terabyte is a full stack web development studio who finds and builds solutions that fit your project What is TauriTauri describes itself as a framework for building tiny, blazingly fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS
Secure your dependencies. Ship with confidence.Socket is a developer-first security platform that protects your code from both vulnerable and malicious dependencies.
npm/yarn/pnpm/bunを同じコマンドで扱えるni.zshに、npmで配布されているマルウェアを間違ってインストールするのを防ぐ機能を追加しました。 ni.zshについては、次の記事を参照してください。 npm/yarn/pnpm/bunを同じコマンドで扱える ni のzsh実装を書いた | Web Scratch npmパッケージのマルウェア npmパッケージとしてマルウェアをpublishして開発者を狙うサプライチェーン攻撃が最近多くなっています。 たとえば、次の記事ではemails-helperというもっともらしいパッケージ名でマルウェアが配布されていました。 NPM Package Masquerading as Email Validator Contains C2 and Sophisticated Data Exfiltration 他にもtyposquatting
About `npm:` support of Deno
Deno の復習をしつつ、Deno に新しく入った `npm:` 機能の概要や、開発経緯の話をします。
PLAID で i18n おじさんエンジニアしてる kazupon です。 この記事は plaid advent calendar 2019 の 17日目の記事です。 はじめに 筆者は、PLAID のプロダクト開発以外にも、オープンソースソフトウェア (以下 OSS )開発者として vue-i18n といったオープンソースプロジェクトを持っており、Node.js においては npm または yarn といったパッケージマネージャーと呼ばれるもので、Node.js そして必要に応じてブラウザ向けに動作するコードをパッケージにして OSS として配布しています。 npm / yarn で配布する OSS は、一般的には semver のようなセマンティックバージョンニングの仕様に沿った形で、バージョンをリリース毎に発行して管理して、npm publish や yarn publish によって
GitHub - garronej/denoify: 🦕For NPM module authors that would like to support Deno but do not want to write and maintain a port.
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
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 この度Ubieのプロダクトで利用しているアイコンのReact版 @ubie/ubie-icons をnpmに公開しました！ GitHubのリポジトリはこちら。 今回はその背景や実装方法などを紹介します。 自社でアイコンを作った背景 このアイコンセットが作られる前は、必要になったタイミングでデザイナーそれぞれが個別にアイコンをデザインしていました。しかし次のような課題がありました。 アイコンの種類が少ないので使いにくい 必要なタイミングで都度デザインしていたためテイストや方針がバラバラ 実装に組み込まれておらず使いにくい Ubie独自のアイコンや医療系のアイコンなども汎用的に扱えるようにしたい そこで、Ubieのプロダクト全般で汎用的に使えるアイコンセットを構築するプロジェクトが立ち上がりました。 アイコン
Nodeのバージョンを上げたらnode-sassがエラーを吐いたのでコードリーディングしてみた | DevelopersIO
Node Sass could not find a binding for your current environmentというエラーメッセージをきっかけにnode-sassのソースコードを少し追ってみました。 起きた事象 フロントエンドのビルド環境としてNode v8で動いていたプロジェクトをNode v10にアップデートしました。その結果、次のような Node Sass could not find a binding for your current environment というエラーメッセージを吐いて落ちました。 どうやら使用していたモジュールのnode-sassでエラーが起きたようです。 Error: Missing binding /path/to/project/node_modules/node-sass/vendor/darwin-x64-64/binding.no
Publish, ship, and install modern JavaScript for faster applications Stay organized with collections Save and categorize content based on your preferences. Over 90% of browsers are capable of running modern JavaScript, but the prevalence of legacy JavaScript remains a large source of performance problems on the web today. Modern JavaScript Modern JavaScript is not characterized as code written in
2019年のOSS活動の振り返り記事です。 今までの振り返り。 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2019年のGitHubのContributionsは7000~10000ぐらいを推移していました。 ちょっとプライベートリポジトリのコミット比率が上がって、原因はasocial-bookmarkでのブックマークシステムな気がします。後は、仕事のリポジトリがPrivate比率多い。 GitHubのCurrent Streakは2246日で6.153424658年コミットは続いています。 データ
追記情報 v0.5.0で.vueの拡張子もサポートするようになりました。 はじめに 現在のJavaScriptはexport、importによるモジュールの切り離しと結合が可能であるため。大きなプロジェクトに成長させることができます。 実装が進むにつれてファイル間の依存が複雑になっていき、実装全体の依存関係を把握するのが難しくなっていきます。これはプロジェクトに対して新しいメンバーが増えたときに、コードリーディングの時間を十分に取る必要があります。また、OSSのライブラリに貢献したいときも同様の状況が生まれるでしょう。特に後者は開発メンバーが近くにいるとも限らず、他国の方である可能性も十分に高いため開発に参加するための準備が必要になります。 このような、全体の依存関係の設計を見直したい場合や、新たに開発に参画する場合により短時間に理解を深めるためのツールを作成したので紹介します。 @cod
前回はNode.js単独での機能に焦点をあてて説明しましたが、Node.jsはnpm/yarnなどのパッケージ管理システムと組み合わせて使うことが想定されています。本稿ではライブラリの依存解決としての側面を中心に、npm/yarnの挙動を説明します。 ←前 目次 次→ モジュールからパッケージへ モジュールは、JavaScriptプログラムを複数のファイルに分割し、必要に応じてロードする仕組みでした。 (1ファイル = 1モジュール) 一方パッケージは、複数のモジュールファイルをまとめて1つの独立した単位として扱う仕組みです。パッケージというより大きなまとまりを作ることで、バージョン番号を付与し、パッケージをパッケージレジストリに登録し、依存管理をすることができるようになります。 Node.jsと package.json パッケージはおおよそ package.json の存在によって特徴
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pure ESM package
Node.jsでport 80を開こうとするとEACCESSになる | WASP株式会社
2023年、Denoはこんなに進化していた ー Node.jsとの互換性強化、Deno.serve()、WebGPU…
GitHub、JavaScriptパッケージ管理のnpmを買収
monorepo で開発時にパッケージの変更を build なしで他のパッケージに反映する方法
ESM>CDN
Deno を使って Node でも Deno でも動くライブラリを作る - Qiita
JSR: the JavaScript Registry
npmパッケージのvulnerability対応フロー - Qiita
MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
npm scripts で rimraf を使わずディレクトリを再帰的に削除する
Socket - Secure your dependencies. Ship with confidence.
ni.zsh: npmインストール時のサプライチェーン攻撃を検知する機能を追加
Ship.jsでリリースフローを改善する - Qiita
Ubieで利用しているアイコンをnpmパッケージとして公開しました！
Publish, ship, and install modern JavaScript for faster applications | Articles | web.dev
今年のOSS活動振り返り @ 2019
JavaScript・TypeScriptのimport・exportの依存関係を可視化するcode-dependencyの紹介 - Qiita
JSエコシステムぶらり探訪(3): npmとyarnとnode_modules - Qiita