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

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

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

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

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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