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.7k
Parsing Javascript
brn
12
8k
JSON & Object Tips
brn
1
330
CA 1Day Youth Bootcamp for Frontend LT
brn
0
720
Modern TypeScript
brn
2
700
javascript - behind the scene
brn
3
640
tc39 proposals
brn
0
720
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
540
Other Decks in Programming
See All in Programming
CSC307 Lecture 14
javiergs
PRO
0
220
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
CSC307 Lecture 08
javiergs
PRO
0
330
CSC307 Lecture 10
javiergs
PRO
0
310
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
20240706_CDKConf
takuyay0ne
0
1.2k
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Activities at Cairo Library
cairolibrary720
0
1.2k
最近追加した型の紹介とその振り返り
aki19035vc
0
170
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Ruby is Unlike a Banana
tanoku
96
10k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The Invisible Customer
myddelton
117
13k
Designing Experiences People Love
moore
136
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Documentation Writing (for coders)
carmenintech
63
4.2k
How STYLIGHT went responsive
nonsquared
93
5k
Building Your Own Lightsaber
phodgson
101
5.9k
Git: the NoSQL Database
bkeepers
PRO
423
64k
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כ؎ٝة٦ؿؑ٦أך窟♧ָדֹךדזַזַ״ְדׅ