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

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כ؎ٝة٦ؿؑ٦أך窟♧ָדֹ׷ךדזַזַ״ְדׅ