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

Webpackで作る
Vueコンポーネント開発環境 / Creating the Vue c...

hypermkt
March 16, 2018

Webpackで作る
Vueコンポーネント開発環境 / Creating the Vue component development with Webpack.

バーチー / GMO Pepabo, Inc.
2018.03.16 フロントエンドテックミーティング#1
https://tech.pepabo.com/2018/04/02/frontend-tech-meeting-1-report/

hypermkt

March 16, 2018
Tweet

More Decks by hypermkt

Other Decks in Programming

Transcript

  1. ίϯϙʔωϯτ w )5.-ཁૉΛ࠶ར༻ՄೳʹΧϓηϧԽ͠ΧελϜλάͱ͠ ͯར༻Ͱ͖Δ  var Header = { template:

    ‘<div class=“title”><p>A custom component!</p></div>’ } new Vue({ // ... components: { 'my-header': Header } }) <div id="example"> <my-header></my-header> </div>
  2. ୯ҰϑΝΠϧίϯϙʔωϯτແ͠ <body id="home" class=' is__responsive'> <header> <div id="header" class="common__header__area js-common__header__area">

    <div class="common__header__wrap clearfix"> <h1 class="common__header__logo__wrap"> <a href="/" title="ϗʔϜϖʔδ࡞੒αʔϏεͳΒʮάʔϖʯ" class="common__header__logo__link" id="logo"> <img src="/img/common/logo.png" alt="ϗʔϜϖʔδ࡞੒αʔϏεͳΒʮάʔϖʯ by GMOϖύϘ" class="common__header__logo js-common__header__logo" /> </a> </h1> <div class="common__header__menu__list__signup__sp__wrap js-common__header__menu__list__signup__sp__wrap"> <a href="/signup/" class="common__button common__button__signup header__menu__list__signup_sp" id="header_start_btn_free_sp">͸͡ΊΔ</a> </div> <nav> <span class="fa fa-menu common__header__menu__icon js-common__header__menu__icon"></span> <span class="fa fa-cross common__header__menu__close__icon js-common__header__menu__close__icon"></span> <div class="common__header__menu__wrap js-common__header__menu__wrap"> <ul class="common__header__menu__list__wrap clearfix"> <li class="hidden__pc__block visible__tb__block visible__sp__block"> <a href="/" class="header__menu__list__title__home header__menu__sp__visible" id="menu_0_home">ϗʔϜ</a> </li>
  3.  ϑΝΠϧͱσΟϨΫτϦߏ੒ $ tree . . ├── index.html ├── package-lock.json

    ├── package.json ├── src │ ├── app.js │ ├── hello.js │ └── world.js └── webpack.config.js 1 directory, 7 files
  4.  8FCQBDLͷΠϯετʔϧ $ npm init -y
 $ npm install —-save-dev

    webpack webpack-cli wW͔ΒίϚϯυϥΠϯΠϯλʔϑΣʔε͕෼ׂ͞ΕͨͷͰ
 XFCQBDLDMJͷΠϯετʔϧ΋ඞཁ
  5.  8FCQBDLઃఆϑΝΠϧ const path = require('path'); module.exports = {
 //

    ΤϯτϦϙΠϯτͷઃఆ entry: './src/app.js', output: { // ग़ྗϑΝΠϧ໊
 filename: 'bundle.js', // ग़ྗઌσΟϨΫτϦ
 path: path.join(__dirname, 'dist/') } } XFCQBDLDPOpHKT
  6. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="dist/bundle.js"></script>

    </body> </html> // export defaultͰؔ਺ΛϞδϡʔϧͱͯ͠ެ։͢Δ
 export default function hello() { return 'Hello'; } export default function world() { return 'World'; } JOEFYIUNM TSDIFMMPKT TSDXPSMEKT  // ֎෦Ϟδϡʔϧ͔ΒΤΫεϙʔτ͞Εͨؔ਺ΛΠϯϙʔτ͢Δ
 import hello from './hello.js'; import world from './world.js'; console.log(hello() + world()); TSDBQQKT
  7.  XFCQBDLͰϏϧυͯ͠όϯυϧϑΝΠϧΛੜ੒͢Δ $ npx webpack Hash: e7d757560adbd755bcca Version: webpack 4.1.1

    Time: 265ms Built at: 2018-3-15 23:17:15 Asset Size Chunks Chunk Names bundle.js 592 bytes 0 [emitted] main Entrypoint main = bundle.js [0] ./src/app.js + 2 modules 205 bytes {0} [built] | ./src/app.js 97 bytes [built] | ./src/hello.js 54 bytes [built] | ./src/world.js 54 bytes [built] WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. $ tree . . ├── dist │ └── bundle.js ├── index.html ├── src │ ├── app.js │ ├── hello.js │ └── world.js └── webpack.config.js 2 directories, 6 files ૿͑ͯΔ
  8.  ϩʔμʔઃఆ … // লུ module: { rules: [ {

    test: /\.js$/, // ϩʔμʔର৅ͷ֦ுࢠ use: [{ loader: ‘babel-loader', // ར༻͢Δϩʔμʔ options: { presets: ['es2015'] } }] } ] } XFCQBDLDPOpHKT wϩʔμʔઃఆͱ͸ɺ$44ͳͲ+BWB4DSJQUҎ֎ͷϑΝΠϧΛ ಡΈࠐΉઃఆ
  9.  ࣮ߦͯ͠ΈΑ͏ import hello from './hello.js'; import world from './world.js';

    const message = hello() + ' ES6’ // ES6ͷม਺એݴΛ࢖༻ console.log(message); TSDBQQKT wTSDBQQKTʹ&4ه๏ͷमਖ਼Λͯ͠OQYXFCQBDLΛ࣮ߦ wϒϥ΢βͷ$POTPMFϩάʹग़ྗ͞ΕΔ දࣔ͞Εͨ
  10. XFCQBDLEFWTFSWFSͷઃఆखॱ  $ npm install —-save-dev webpack-dev-server const path =

    require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, devServer: { contentBase: path.join(__dirname, 'dist') }, } XFCQBDLDPOpHKT ᶃXFCQBDLEFWTFSWFSΛΠϯετʔϧ ᶄ഑৴ݩσΟϨΫτϦΛࢦఆ͢Δ
  11. 8FCQBDL։ൃαʔόʔͷઃఆ  const path = require('path'); module.exports = { entry:

    './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, devServer: { contentBase: path.join(__dirname, 'dist') }, } XFCQBDLDPOpHKT <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello World </body> </html> EJTUJOEFYIUNM த਎͸ۭ TSDJOEFYKT
  12. WVF͕ಡΊΔΑ͏ʹઃఆ͢Δ 7VFΛΠϯετʔϧ͢Δ  $ npm install —-save vue $ npm

    install --save-dev vue-loader vue-template- compiler css-loader 7VFKTͷ୯ҰϑΝΠϧίϯϙʔωϯτ WVFϑΝΠϧ Λѻ ͏ͨΊʹҎԼΛΠϯετʔϧ
  13. ϩʔμʔઃఆ const path = require('path'); module.exports = { entry: './src/index.js',

    output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', } ] }, devServer: { contentBase: path.join(__dirname, 'dist') }, } XFCQBDLDPOpHKT
  14. ୯ҰϑΝΠϧίϯϙʔωϯτͷදࣔઃఆ <!DOCTYPE html> <html> <head> <meta charset="utf-8">
 <script src="./bundle.js"></script> <title></title>

    </head> <body> <div id="app"></div> </body> </html> EJTUJOEFYIUNM import Vue from 'vue'; import App from './components/App.vue'; window.onload = function() { new Vue(App).$mount('#app'); } TSDJOEFYKT w 8FCQBDLͰϏϧυͨ͠+4ΛಡΈࠐΉ w 7VFͰϚ΢ϯτ͢ΔՕॴΛࢦఆ w ը໘ͷಡΈࠐΈ͕׬ྃͨ͠Β
 BQQʹ"QQWVFΛϚ΢ϯτ ஔ͖׵͑ʣ
  15. ίϯϙʔωϯτϑΝΠϧͷ࡞੒ <template> <div> <header-component></header-component> <p class=“blue”>This is App component.</p> </div>

    </template> <script> import Header from './Header.vue'; export default { components: { 'header-component': Header } } </script> <style> .blue { color: blue; } </style> TSDDPNQPOFOUT"QQWVF <template> <div> <p class="title">{{ title }}</p> </div> </template> <script> export default { data: function() { return { title: 'This is Header component’ } } } </script> <style> .title { font-size: 20px; font-weight: bold; } </style> TSDDPNQPOFOUT)FBEFSWVF