Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
makeとnpmでプロジェクトをコントロールする
Search
Taketoshi Aono(青野健利 a.k.a brn)
March 08, 2018
Programming
4
350
makeとnpmでプロジェクトをコントロールする
makeとnpmをつかってプロジェクトをなんとかしてる話
#uit_2
Taketoshi Aono(青野健利 a.k.a brn)
March 08, 2018
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
2.9k
Parsing Javascript
brn
12
8.9k
JSON & Object Tips
brn
1
380
CA 1Day Youth Bootcamp for Frontend LT
brn
0
780
Modern TypeScript
brn
2
740
javascript - behind the scene
brn
3
680
tc39 proposals
brn
0
780
プロダクト開発とTypeScript
brn
8
2.8k
React-Springでリッチなアニメーション
brn
1
590
Other Decks in Programming
See All in Programming
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
役立つログに取り組もう
irof
26
8.7k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Embracing the Ebb and Flow
colly
84
4.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Building an army of robots
kneath
302
42k
Designing for Performance
lara
604
68k
Gamification - CAS2011
davidbonilla
80
5k
How GitHub (no longer) Works
holman
311
140k
Agile that works and the tools we love
rasmusluckow
327
21k
Building Your Own Lightsaber
phodgson
102
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Making Projects Easy
brettharned
115
5.9k
Transcript
Control project with make and npm
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger
OSS Contributor of V8 About http://info.b6n.ch
Agenda • Why we should stop using gulp or grunt
• npm scripts • Convinient modules • Dependencies and DLL • Linting٥Formatting • Before commit • Make • Wrap by Makefile • Docker
Why we should stop using gulp or grunt javascriptד鎸鶢ׅةأؙٓٝش٦כ㺁僒ח㾩➂⻉׃װֻׅծ ת㹑鎉涸דזְךד铣חְֻ
Alternate? npm scriptsדװגְֻ Why we should stop using gulp or
grunt
npm scripts npm run ~ד㹋遤דֹ؝وٝس shell؝وٝس湫䱸㹋遤ׅ
Convinient modules npm scriptsכءٝفָٕ堣腉ָshellח䊩〸ׁג׃תֲ windowsך㜥さכ؝وٝسفٗٝفزծmacכbashהַך鴟ד ⢪ִ؝وٝسָⰋֻ麩ֲ ֿדnpm modulesד䊴ェ ׅ npm scripts
rimraf rm -r 湱䔲ך⹛⡲䲿⣘ׅ ر؍ؙٖزٔ⚥魦׀הⰋ嶊׃ׅ npm scripts
ejs-cli ejsךذٝفٖ٦زؒٝآٝcliד⹛⡲ׇׁ 䒷侧חjson床ֿׅהד㾜ׁ npm scripts
cpx File Glob⢪גך؝ؾ٦堣腉䲿⣘ٌׅآُ٦ٕ watch堣腉װծtransform堣腉ַ֮ז넝堣腉 npm scripts
npm-run-all npm؝وٝسך⚛٥湫㹋遤〳腉חׅ ָֿזְהװגזְ npm scripts
# 直列実行 # command1 => command2 => command3! run-s command1
command2 command3! ! # 並列実行 # command1 =>! # command2 =>! # command3 =>! run-p command1 command2 command3!
Dependencies and DLL فٗآؙؑزדכWebpackהDLLPlugin⢪גְ DLLPluginכ3rd Partyךٌآُ٦ٕהַ✮תהגְֶג غٝسٕ鸞䏝ぢ♳ׇׁךPlugin
Bundle all dependencies webpack♳דpackage.jsonךdependencies䫙ֹ⳿׃גׅץג DLLחתהגְָծٌآُ٦ָٕ㢌㜥さח䩛⹛דDLL ⹛ַׅךָ⦜ postinstall⢪ֲ Dependencies and DLL
const PKG = require('./package.json');! ! module.exports = {! entry: {!
"dll": Object.keys(PKG.dependencies);! },! ...! }!
postinstall npm scriptsח'post install'הְֲせדscript鷄⸇ׅהծ npm installך֮הח䭷㹀׃script㹋遤׃גֻ ֿך堣腉ⵃ欽׃גpostinstallחdll䭷㹀ׅ ָծ npmהnpm install
'module'ךהֹחpostinstallָ⹛⡲׃זְ => yarn⢪גְךד搀㉏겗 Dependencies and DLL
"scripts": {! ...! "postinstall": "run-s dll-prod dll-debug",! ...! }!
Linting and Formatting TypeScript崢זךדtslintהprettier⢪גְ tslint麩ծְ֮כprettierדؿؓ٦وحزׁגְזְؿ؋؎ٕ commitׇֻׁזְ
git pre-commit hook Gitד盖椚׃גְفٗآؙؑزזל.git/hooks⟃♴חpre- commitהְֲせדshellأؙٔفز縧ֻֿהדcommitח荈 ⹛דscript㹋遤׃גֻ ծぐ涪罏ח剑ⴱחpre-commitأؙٔفز؝ؾ٦׃ג顗 ֲ䗳銲ָ֮⦜ Linting and
Formatting
pre-commit pre-commitהְֲnpm modulesכinstallׅה荈⹛ד git pre-commitך鏣㹀׃גֻ ׁחpackage.jsonחprecommitהְֲ갪湡⡲ה䭷㹀׃ npm script㹋遤׃גֻ ת0⟃㢩ךreturn codeד穄✪ׅה؝ىحز⨡姺׃גֻ
ֿ⢪ֲךָし Linting and Formatting
{! ...! "scripts": {! "test": "echo \"Error\" && exit 1",!
"foo": "echo \"fooo\" && exit 0",! "bar": "echo \"bar\" && exit 0"! },! "pre-commit": [! "foo",! "bar",! "test"! ]! }! } !
make npm scriptכ⤑ⵃזךָծؿٗٝزؒٝسؒٝآص،⟃㢩חה ג֮ת꼧厩ָזְ ֿד؝وٝسٓ؎ٝךةأؙٓٝش٦ה׃גmakeⵃ欽ׅ
What is make? makeכUnix禸OSךرؿ؋ؙزأةٝت٦سחזגְ ةأؙٓٝش٦דC鎉铂ך؝ٝػ؎ٕ瘝ח״ֻ⢪גְ 圓俑כ䎂僒זךד醱꧟ח剅ֻֿהדֹםה鋅ַװ ְׅ ֿדֿךmakenpm scriptsךWrapperה׃ג⢪ֲ make
Makefile makeכMakefileהְֲؿ؋؎ٕ䱱׃ ֿח鎸鶢ׁةأؙ㹋遤ׅ make
WEBPACK = node node_modules/.bin/webpack! ! .PHONY: build install! ! all:
install build! ! build:! NODE_ENV=production WEBPACK! ! install:! yarn install!
WEBPACK = Webpackコマンドのエイリアス! ! .PHONY: ファイルが存在していても優先するコマンド! ! all: デフォルト実行するコマンド! !
コマンド名:! 実行するコマンド!
Docker 植㖈ךفٗآؙؑزכKubernetes⢪欽׃גְךד Dockerדؽٕس㹋遤׃Push׃גְ ךnpm scriptכDockerfileח鎸鶢׃גֶ MakefileכDockerךؽٕس遤ֲךדnpmך؝وٝسכ㹋遤׃ז ְ
make npm Docker gcr
満 npm scripts穠㽷醱꧟חזגֻה׃וֻז windowsِ٦ؠ٦ָث٦يחְזְךדwindowsד⹛ַזְ〳腉䚍 ָ넝ְ makeכmac٥linuxِ٦ؠ٦כرؿٕؓزד㶷㖈׃גְָծ windowsכcygwin٥mingwהַⰅזְה windows10זזהַז
תה makeכ؎ٝة٦ؿؑ٦أך窟♧ָדֹךדזַזַ״ְדׅ