今モノレポやるならどのツール使うのがいいのん?? - Qiita
はじめに こんにちは、「拳で」 と申します! NRI OpenStandia Advent Calendar 2023の16日目は 今モノレポやるならどのツール使うのがいいのん?? というタイトルでお送りいたします! 最近モノレポで開発することがあり、モノレポ管理を行うためのツールってちょいちょい聞くけど何が勢いあるんだろう?と気になったので調べてみました。 皆様のおすすめのツールや設定などがございましたらぜひコメントで教えていただけると大変喜びます🙇♂️ TL;DR フロントエンド(JavaScript/TypeScript)開発プロジェクト向けモノレポ管理ツールは、 npm Workspaces・Lerna・Nx・Turborepo が勢いがある 各ツールの選定基準は個人的に以下を推奨 ライトに手早くモノレポ管理したい： npm Workspaces 複数のnpmパッケージの開発・
脆弱性のあるJavaScriptライブラリの使用を防ぐには / #sec_kansai 14
総関西サイバーセキュリティＬＴ大会（第14回） ( https://sec-kansai.connpass.com/event/122914/ ) でJavaScriptライブラリの脆弱性に関する発表を行いました。
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
サーバーサイド経験者に贈るフロントエンド技術の学び方 - Qiita
この記事は クラウドワークス Advent Calendar 2018 の4日目の記事です。 はじめに クラウドワークスのフロントエンドチームでエンジニアをしています @eighty8 です。 2018年9月に入社しました。 長らくソシャゲのサーバーサイドエンジニアをやってまして、本格的にフロントエンド開発に携わるのはクラウドワークスに来てからになります。 フロントエンドエンジニア1年生になってみて最初に感じたことは、 「周辺技術が多過ぎてどっから手をつけていいのかわからんちん。。。」 です。 Frontend Roadmap というのを見みてもわかる通り、フロントエンドもこのボリューム ∑(ﾟωﾟﾉ)ノ 今まで断片的に情報は掻い摘んできてたんですが、それじゃダメだ・・・と痛感しました。 まあ、これらすべてに精通している必要はないと思いますが、HTML書けます、CSS書けます、ついでにJa
すべてのpackage.json に含まれた方が良いと思うもの - Qiita
{ "devDependencies": { "eslint": "github:eslint/eslint", "husky": "github:typicode/husky", "tslint": "github:palantir/tslint", "lint-staged": "github:okonet/lint-staged", "npm-run-all": "github:mysticatea/npm-run-all", "prettier": "github:prettier/prettier" } } Formatter is 正義 JavaScript 業界がここ数年でSyntaxが豊かになるだけでなく、何より開発環境が劇的に進化したと感じています。 代表的なものとしては TypeScript や FlowType のような型情報を付与する概念ですが、 合わせてストレスフ
package.jsonで値を展開する - 技術探し
🎍今年初の記事です🎍 そういえばこんな機能あったなーって感じだったので記事にしてみました。 本当は今年最初の記事用意していたのですが、まだ終わってないので後ほど。。 github.com 今回は、タスクのstartとbuildに同じ変数をwebpackへ渡すために共通化したくて、量が多くなってきたのでリファクタリングしました。 手順 文字列の場合 オブジェクトの場合 配列の場合 まとめ 手順 $npm_package_にpackage.jsonに書いたkeyをつなげるとそれのvalue展開されます。 コンソール上では、展開されませんが、JS上では展開されます。 // 確認用のJS console.log(process.argv[2]); $ npm run main > node main.js $npm_package_foo bar 文字列の場合 { "foo": "bar",
Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"
sprockets + rails-assetsを卒業して、npm + webpackへ移行 - ただのにっき(2016-05-19)
■ sprockets + rails-assetsを卒業して、npm + webpackへ移行 1年少々前、Webアプリのフロントエンド開発環境として暫定的にRails Assetsを使うことにしたのだけど、あれからjs界隈もしだいに落ち着いてきて*1、いろいろと勝ち組っぽいツールが決まってきた気がする。 そんなわけで、徐々にそっち方向へ移行してこうかな、と。とくにRails Assetsはサービス自体が終了の方向らしいので、まずはそのへんから。jsのパッケージマネージャとタスクランナーの勝ち組として、おれの観測範囲でみえてる感じだと: パッケージはpackage.jsonをnpmで管理するのが一番シンプル タスクランナーもnpmでいいよもう……という流れが強そう AltJSは使わずにES2015、ビルドにはWebpackとBabelの組み合わせ ってところか? 少し前に話題になった「1
npm-scripts で使える便利モジュールたち - Qiita
npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
Lerna を使って、 Babel や React が採用している monorepo を試してみる - Qiita
monorepo とは 複数の npm package を 単一の git repository で管理すること 例えば Babel では、 100 以上の npm package が単一の git repository で管理されている https://github.com/babel/babel/tree/master/packages package 毎に repository を作る場合と比較した Pros & Cons Babel の repository のドキュメントから抜粋 Pros: lint, build, test, release のプロセスを共通化できる package をまたがった修正が容易になる issue 管理を一元化できる 開発環境の構築が簡単になる テストも package をまたいで実行でき、複数 package が絡む不具合の検知が容易になる Con
Railsのフロントエンドのビルドをnpmコマンドのみで完結したい - Qiita
こんにちは、freeeでエンジニアをやってます @yo_waka です。 これは、freee Engineers Advent Calendar 2015の11日目の記事です。 これまでの弊社のAdvent Calendarでは、社内で革命と呼ばれるフロントエンドの改善ネタが多いと思いますが、その流れとして、RailsアプリケーションにおけるフロントエンドのビルドツールであるところのSprocketsをどのようにしたら外せるかという話を書きます。 Sprocketsがやってくれること まずはSprocketsが裏側でどういうことをやっているのか知る必要があります。 Advent Calendar4日目の記事で既に概要が書かれていますが、もう少し細かく内部動作に踏み込んで書いてみます。 尚、Sprocketsのコードは現状のRailsの最新版である4.2.5で利用されている、Sprocket
npmに上がっていないブラウザ向けに書かれたJavaScriptをnode.jsから雑に使うの術 - 時計を壊せ
ブラウザ向けに書かれたJavaScriptだと、windowに対してexportしていて、nodeから使いにくくて困ることがある。 nodeでも動くようなpatchを書けばいいという話ではあるが、githubにコードが上がっていないとやりにくくてつらい。 そこで、適当なObjectをcontextにして、vmでぶん回すことで、雑に解決することができた。 以下はGeoHexというライブラリのJavaScriptの実装がwindow.GEOHEXにエクスポートする実装であったために困ったので雑に解決した例。 "use strict"; var http = require('http'); var co = require('co'); var get = function (url) { return new Promise(function (resolve, error) { http.
[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)
■ [ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 npm と bower と grunt を使って javascripts のテストに必要なライブラリをインストールするようにした by hsbt · Pull Request #414 · tdiary/tdiary-core で導入した npm, grunt, bower の組み合わせで javascript/css をかなり良い感じに organize するという仕組みを production の rails に投入した。 準備としてはまず nodejs を使えるようにするところから開始。これは cli さえ満足に動けばいいので xbuild を使ってビルドしたものを /opt/node-x.y.z とか /usr/local/node-x.y.z に置いて /usr/loca
![[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cab6183abe73ade0ce0a24c302ac36ee5c17b43/height=288;version=1;width=512/https%3A%2F%2Fwww.hsbt.org%2Fdiary%2Ftheme%2Fogimage.png)
npmのあまり知られてない機能 10選 - from scratch
なんか最近Twitterとか職場でも「npmの機能でそんなのあったんだ」って言われること多いので、説明していきます。 ちなみにタイトルにとりあえず10選って書いたけど、あんまりたくさん思いついてないのに、10選って書いてしまったので最後の方は微妙かもしれません。 1. npm installは npm i でも同じことができる まぁ単純なショートカットですね。isntallとかtypoしてても空気読んでくれるんですが、短いほうがいいよねってことで。 # npm installって書くのも $ npm install socket.io #npm i って書くのも同じ $ npm i socket.io # ちなみに --saveは -S, --save-devは -D にできる $ npm i socket.io -S $ npm i mocha -Dショートカット小ネタ。 2. npm
外部 grunt タスク（ grunt プラグイン）を作るとき - oogatta のブログ
タスク grunt の自作 task は Gruntfile.js 内に好きに書けるし、別ファイルに書いておくのも簡単（ grunt.task.loadTasks ）。 プラグイン タスクを別リポジトリで管理したいなあと思ったとき、その別ファイルを git の submodule にしても良いのだけど、公式おすすめは npm パッケージ化すること。 grunt 的には「 grunt plugin 」化すること。 手順 Creating plugins - Grunt: The JavaScript Task Runner ここに従う。 npm publish さえしなければ超適当にやっても大丈夫。 npm publish されてるのでも超適当なの多いけど…。 オレオレ手順 あとは grunt-init gruntplugin すると、このプラグイン自体の Gruntfile.js ができて
フロントエンドのツール Yeoman を勘違いしていた
Yeoman を勘違いしてスルーしてたところもあったので、 改めてこんなメリットがあるんだーみたいなところを共有しつつ、 必要性を感じられる人が使い始める機会になれればと思います。 僕もこれからちょいちょい使っていきたいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sindresorhus/awesome-npm: Awesome npm resources and tips
【npm + Karma + Jasmine】JavaScriptの単体テスト環境を構築する - Qiita
コマンドパスを自動で通し npm install -g しない - Qiita
GitHub - rlidwka/sinopia: Private npm repository server
