Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

makeとnpmをつかってプロジェクトをなんとかしてる話
#uit_2

Transcript

  1. Control project with make and npm

  2. Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger

    OSS Contributor of V8 About http://info.b6n.ch
  3. 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
  4. Why we should stop using gulp or grunt javascriptד鎸鶢ׅ׷ةأؙٓٝش٦כ㺁僒ח㾩➂⻉׃װֻׅծ ת׋㹑鎉涸דזְךד铣׫חְֻ

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

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

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

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

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

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

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

  12. # 直列実行 # command1 => command2 => command3! run-s command1

    command2 command3! ! # 並列実行 # command1 =>! # command2 =>! # command3 =>! run-p command1 command2 command3!
  13. Dependencies and DLL فٗآؙؑزדכWebpackהDLLPlugin׾⢪׏גְ׷ DLLPluginכ3rd Partyךٌآُ٦ٕהַ׾✮׭תה׭גְֶג غٝسٕ鸞䏝׾ぢ♳ׇׁ׷׋׭ךPlugin

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

  15. const PKG = require('./package.json');! ! module.exports = {! entry: {!

    "dll": Object.keys(PKG.dependencies);! },! ...! }!
  16. postinstall npm scriptsח'post install'הְֲせ⵸דscript׾鷄⸇ׅ׷הծ npm installך֮הח䭷㹀׃׋script׾㹋遤׃גֻ׸׷ ֿך堣腉׾ⵃ欽׃גpostinstallחdll׾䭷㹀ׅ׷ ָծ npm׌הnpm install

    'module'ךהֹחpostinstallָ⹛⡲׃זְ => yarn⢪׏גְ׷ךד搀㉏겗 Dependencies and DLL
  17. "scripts": {! ...! "postinstall": "run-s dll-prod dll-debug",! ...! }!

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

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

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

    ֿ׸׾⢪ֲךָし Linting and Formatting
  21. {! ...! "scripts": {! "test": "echo \"Error\" && exit 1",!

    "foo": "echo \"fooo\" && exit 0",! "bar": "echo \"bar\" && exit 0"! },! "pre-commit": [! "foo",! "bar",! "test"! ]! }! } !
  22. make npm scriptכ⤑ⵃזך׌ָծؿٗٝزؒٝسؒٝآص،⟃㢩חה׏ ג֮ת׶꼧厩׫ָזְ ׉ֿד؝وٝسٓ؎ٝךةأؙٓٝش٦ה׃גmake׾ⵃ欽ׅ׷

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

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

  25. WEBPACK = node node_modules/.bin/webpack! ! .PHONY: build install! ! all:

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

    コマンド名:! 実行するコマンド!
  27. Docker 植㖈ךفٗآؙؑزכKubernetes׾⢪欽׃גְ׷ךד Dockerדؽٕس׾㹋遤׃Push׾׃גְ׷ ׉ך׋׭npm scriptכDockerfileח鎸鶢׃גֶ׶ MakefileכDockerךؽٕس׾遤ֲך׫דnpmך؝وٝسכ㹋遤׃ז ְ

  28. make npm Docker gcr

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

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