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

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

Transcript

1. Control project
   with
   make and npm
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. make npm
    Docker
    gcr
    

    View Slide

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

    View Slide

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

    View Slide