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
360
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
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
940
Modern TypeScript
brn
2
800
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
690
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
1
490
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
2
170
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
ReadMoreTextView
fornewid
1
490
GraphRAGの仕組みまるわかり
tosuri13
8
510
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
300
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
49
32k
WindowInsetsだってテストしたい
ryunen344
1
210
ふつうの技術スタックでアート作品を作ってみる
akira888
0
220
Team operations that are not burdened by SRE
kazatohiei
1
290
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
PicoRuby on Rails
makicamel
2
110
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Become a Pro
speakerdeck
PRO
28
5.4k
A designer walks into a library…
pauljervisheath
207
24k
Why Our Code Smells
bkeepers
PRO
337
57k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Thoughts on Productivity
jonyablonski
69
4.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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כ؎ٝة٦ؿؑ٦أך窟♧ָדֹךדזַזַ״ְדׅ