makeとnpmでプロジェクトをコントロールする

Slide 1

Slide 1 text

Control project with make and npm

Slide 2

Slide 2 text

Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger OSS Contributor of V8 About http://info.b6n.ch

Slide 3

Slide 3 text

Agenda •  Why we should stop using gulp or grunt •  npm scripts •  Convinient modules •  Dependencies and DLL •  Linting٥Formatting •  Before commit •  Make •  Wrap by Makeﬁle •  Docker

Slide 4

Slide 4 text

Why we should stop using gulp or grunt javascriptד鎸鶢ׅ׷ةأؙٓٝش٦כ㺁僒ח㾩➂⻉׃װֻׅծ ת׋㹑鎉涸דזְךד铣׫חְֻ

Slide 5

Slide 5 text

Alternate? npm scriptsדװ׏גְֻ Why we should stop using gulp or grunt

Slide 6

Slide 6 text

npm scripts npm run ~ד㹋遤דֹ׷؝وٝس shell؝وٝس׾湫䱸㹋遤ׅ׷

Slide 7

Slide 7 text

Convinient modules npm scriptsכءٝفٕ׌ָ堣腉ָshellח䊩〸ׁ׸ג׃תֲ windowsך㜥さכ؝وٝسفٗٝفزծmacכbashהַ׉ך鴟ד ⢪ִ׷؝وٝسָⰋֻ麩ֲ ׉ֿדnpm modulesד䊴׾ェ　ׅ׷ npm scripts

Slide 8

Slide 8 text

rimraf rm -r 湱䔲ך⹛⡲׾䲿⣘ׅ׷ ر؍ؙٖزٔ׾⚥魦׀הⰋ嶊׃ׅ׷ npm scripts

Slide 9

Slide 9 text

ejs-cli ejsךذٝفٖ٦زؒٝآٝ׾cliד⹛⡲ׇׁ׷ 䒷侧חjson׾床ֿׅהד㾜Ꟛׁ׸׷ npm scripts

Slide 10

Slide 10 text

cpx File Glob׾⢪׏גך؝ؾ٦堣腉׾䲿⣘ׅ׷ٌآُ٦ٕ watch堣腉װծtransform堣腉׮֮׶ַז׶넝堣腉 npm scripts

Slide 11

Slide 11 text

npm-run-all npm؝وٝسך⚛⴨٥湫⴨㹋遤׾〳腉חׅ׷ ֿ׸ָזְהװ׏ג׵׸זְ npm scripts

Slide 12

Slide 12 text

# 直列実行 # command1 => command2 => command3! run-s command1 command2 command3! ! # 並列実行 # command1 =>! # command2 =>! # command3 =>! run-p command1 command2 command3!

Slide 13

Slide 13 text

Dependencies and DLL فٗآؙؑزדכWebpackהDLLPlugin׾⢪׏גְ׷ DLLPluginכ3rd Partyךٌآُ٦ٕהַ׾✮׭תה׭גְֶג غٝسٕ鸞䏝׾ぢ♳ׇׁ׷׋׭ךPlugin

Slide 14

Slide 14 text

Bundle all dependencies webpack♳דpackage.jsonךdependencies׾䫙ֹ⳿׃גׅץג DLLחתה׭גְ׷ָծٌآُ٦ָٕ㢌׻׏׋㜥さח䩛⹛דDLL ׾⹛ַׅךָ꬗⦜ postinstall׾⢪ֲ Dependencies and DLL

Slide 15

Slide 15 text

const PKG = require('./package.json');! ! module.exports = {! entry: {! "dll": Object.keys(PKG.dependencies);! },! ...! }!

Slide 16

Slide 16 text

postinstall npm scriptsח'post install'הְֲせ⵸דscript׾鷄⸇ׅ׷הծ npm installך֮הח䭷㹀׃׋script׾㹋遤׃גֻ׸׷ ֿך堣腉׾ⵃ欽׃גpostinstallחdll׾䭷㹀ׅ׷ ָծ npm׌הnpm install 'module'ךהֹחpostinstallָ⹛⡲׃זְ => yarn⢪׏גְ׷ךד搀㉏겗 Dependencies and DLL

Slide 17

Slide 17 text

"scripts": {! ...! "postinstall": "run-s dll-prod dll-debug",! ...! }!

Slide 18

Slide 18 text

Linting and Formatting TypeScript崢זךדtslintהprettier׮⢪׏גְ׷ tslint麩⿾ծ֮׷ְכprettierדؿؓ٦وحزׁ׸גְזְؿ؋؎ٕ ׾commitׇׁ׋ֻזְ

Slide 19

Slide 19 text

git pre-commit hook Gitד盖椚׃גְ׷فٗآؙؑزז׵ל.git/hooks⟃♴חpre- commitהְֲせ⵸דshellأؙٔفز׾縧ֻֿהדcommit⵸ח荈 ⹛דscript׾㹋遤׃גֻ׸׷ ׋׌ծぐꟚ涪罏ח剑ⴱחpre-commitأؙٔفز׾؝ؾ٦׃ג顗 ֲ䗳銲ָ֮׶꬗⦜ Linting and Formatting

Slide 20

Slide 20 text

pre-commit pre-commitהְֲnpm modulesכinstallׅ׷ה荈⹛ד git pre-commitך鏣㹀׾׃גֻ׸׷ ׁ׵חpackage.jsonחprecommitהְֲ갪湡׾⡲׷ה䭷㹀׃׋ npm script׾㹋遤׃גֻ׸׷ ת׋0⟃㢩ךreturn codeד穄✪ׅ׷ה؝ىحز׾⨡姺׃גֻ׸׷ ֿ׸׾⢪ֲךָし Linting and Formatting

Slide 21

Slide 21 text

{! ...! "scripts": {! "test": "echo \"Error\" && exit 1",! "foo": "echo \"fooo\" && exit 0",! "bar": "echo \"bar\" && exit 0"! },! "pre-commit": [! "foo",! "bar",! "test"! ]! }! } !

Slide 22

Slide 22 text

make npm scriptכ⤑ⵃזך׌ָծؿٗٝزؒٝسؒٝآص،⟃㢩חה׏ ג֮ת׶꼧厩׫ָזְ ׉ֿד؝وٝسٓ؎ٝךةأؙٓٝش٦ה׃גmake׾ⵃ欽ׅ׷

Slide 23

Slide 23 text

What is make? makeכUnix禸OSךرؿ؋ؙزأةٝت٦سחז׏גְ׷ ةأؙٓٝش٦דC鎉铂ך؝ٝػ؎ٕ瘝ח״ֻ⢪׻׸גְ׷ 圓俑כ䎂僒זךד醱꧟ח剅ֻֿה׮דֹ׷ם׏ה鋅׻ַ׶װ ְׅ ׉ֿדֿךmake׾npm scriptsךWrapperה׃ג⢪ֲ make

Slide 24

Slide 24 text

Makeﬁle makeכMakeﬁleהְֲؿ؋؎ٕ׾䱱׃ ׉ֿח鎸鶢ׁ׸׋ةأؙ׾㹋遤ׅ׷ make

Slide 25

Slide 25 text

WEBPACK = node node_modules/.bin/webpack! ! .PHONY: build install! ! all: install build! ! build:! NODE_ENV=production WEBPACK! ! install:! yarn install!

Slide 26

Slide 26 text

WEBPACK = Webpackコマンドのエイリアス! ! .PHONY: ファイルが存在していても優先するコマンド! ! all: デフォルト実行するコマンド! ! コマンド名:! 実行するコマンド!

Slide 27

Slide 27 text

Docker 植㖈ךفٗآؙؑزכKubernetes׾⢪欽׃גְ׷ךד Dockerדؽٕس׾㹋遤׃Push׾׃גְ׷ ׉ך׋׭npm scriptכDockerﬁleח鎸鶢׃גֶ׶ MakeﬁleכDockerךؽٕس׾遤ֲך׫דnpmך؝وٝسכ㹋遤׃ז ְ

Slide 28

Slide 28 text

make npm Docker gcr

Slide 29

Slide 29 text

⿾満 npm scripts׮穠㽷醱꧟חז׏גֻ׷ה׃׿וֻז׷ windowsِ٦ؠ٦ָث٦يחְזְךדwindowsד⹛ַזְ〳腉䚍 ָ넝ְ makeכmac٥linuxِ٦ؠ٦כرؿٕؓزד㶷㖈׃גְ׷ָծ windowsכcygwin٥mingwהַⰅ׸זְה׌׭ windows10ז׵ז׿הַז׷

Slide 30

Slide 30 text

תה׭ makeכ؎ٝة٦ؿؑ٦أך窟♧ָדֹ׷ךדזַזַ״ְדׅ