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
370
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
3.1k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
980
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
900
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
720
Other Decks in Programming
See All in Programming
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
CSC509 Lecture 05
javiergs
PRO
0
300
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Serena MCPのすすめ
wadakatu
4
980
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
470
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
720
明日から始めるリファクタリング
ryounasso
0
130
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Cult of Friendly URLs
andyhume
79
6.6k
Visualization
eitanlees
149
16k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
4 Signs Your Business is Dying
shpigford
185
22k
Building Adaptive Systems
keathley
43
2.8k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Building an army of robots
kneath
306
46k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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כ؎ٝة٦ؿؑ٦أך窟♧ָדֹךדזַזַ״ְדׅ