makeとnpmをつかってプロジェクトをなんとかしてる話 #uit_2
Control projectwithmake and npm
View Slide
Name@brn (ꫬꅿ⨳ⵃ)Occupationؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،CompanyCyberagent ،سذؙأةآؔ AI MessengerOSSContributor of V8Abouthttp://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 gruntjavascriptד鎸鶢ׅةأؙٓٝش٦כ㺁僒ח㾩➂⻉׃װֻׅծת㹑鎉涸דזְךד铣חְֻ
Alternate?npm scriptsדװגְֻWhy we should stop using gulp or grunt
npm scriptsnpm run ~ד㹋遤דֹ؝وٝسshell؝وٝس湫䱸㹋遤ׅ
Convinient modulesnpm scriptsכءٝفָٕ堣腉ָshellח䊩〸ׁג׃תֲwindowsך㜥さכ؝وٝسفٗٝفزծmacכbashהַך鴟ד⢪ִ؝وٝسָⰋֻ麩ֲֿדnpm modulesד䊴ェ ׅnpm scripts
rimrafrm -r 湱䔲ך⹛⡲䲿⣘ׅر؍ؙٖزٔ⚥魦׀הⰋ嶊׃ׅnpm scripts
ejs-cliejsךذٝفٖ٦زؒٝآٝcliד⹛⡲ׇׁ䒷侧חjson床ֿׅהד㾜ׁnpm scripts
cpxFile Glob⢪גך؝ؾ٦堣腉䲿⣘ٌׅآُ٦ٕwatch堣腉װծtransform堣腉ַ֮ז넝堣腉npm scripts
npm-run-allnpm؝وٝسך⚛٥湫㹋遤〳腉חָֿׅזְהװגזְ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 dependencieswebpack♳דpackage.jsonךdependencies䫙ֹ⳿׃גׅץגDLLחתהגְָծٌآُ٦ָٕ㢌㜥さח䩛⹛דDLL⹛ַׅךָ⦜postinstall⢪ֲDependencies and DLL
const PKG = require('./package.json');!!module.exports = {!entry: {!"dll": Object.keys(PKG.dependencies);!},!...!}!
postinstallnpm 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 FormattingTypeScript崢זךדtslintהprettier⢪גְtslint麩ծְ֮כprettierדؿؓ٦وحزׁגְזְؿ؋؎ٕcommitׇֻׁזְ
git pre-commit hookGitד盖椚׃גְفٗآؙؑزזל.git/hooks⟃♴חpre-commitהְֲせדshellأؙٔفز縧ֻֿהדcommitח荈⹛דscript㹋遤׃גֻծぐ涪罏ח剑ⴱחpre-commitأؙٔفز؝ؾ٦׃ג顗ֲ䗳銲ָ֮⦜Linting and Formatting
pre-commitpre-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"!]!}!} !
makenpm scriptכ⤑ⵃזךָծؿٗٝزؒٝسؒٝآص،⟃㢩חהג֮ת꼧厩ָזְֿד؝وٝسٓ؎ٝךةأؙٓٝش٦ה׃גmakeⵃ欽ׅ
What is make?makeכUnix禸OSךرؿ؋ؙزأةٝت٦سחזגְةأؙٓٝش٦דC鎉铂ך؝ٝػ؎ٕ瘝ח״ֻ⢪גְ圓俑כ䎂僒זךד醱꧟ח剅ֻֿהדֹםה鋅ַװְֿׅדֿךmakenpm scriptsךWrapperה׃ג⢪ֲmake
Makefilemakeכ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 npmDockergcr
満npm scripts穠㽷醱꧟חזגֻה׃וֻזwindowsِ٦ؠ٦ָث٦يחְזְךדwindowsד⹛ַזְ〳腉䚍ָ넝ְmakeכmac٥linuxِ٦ؠ٦כرؿٕؓزד㶷㖈׃גְָծwindowsכcygwin٥mingwהַⰅזְהwindows10זזהַז
תהmakeכ؎ٝة٦ؿؑ٦أך窟♧ָדֹךדזַזַ״ְדׅ