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

JavaScriptビルド概論

 JavaScriptビルド概論

上越TechMeetup #3で喋りました。なんでJavaScriptにビルドが必要なんじゃ!という方向けです。

Yukiya Nakagawa

April 13, 2019
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Programming

Transcript

  1. whoami • Yukiya Nakagawa / @Nkzn ʢ32ࡀʣ
 ্ӽࢢग़਎ • ΢Υʔλʔηϧגࣜձࣾ@৽ׁࢢ


    ೶ۀ޲͚αʔϏεʮΞάϦϊʔτʯ • AndroidΤϯδχΞˠϞόΠϧدΓJSΤϯδχΞ • ໌೔͸ٕज़ॻయͰຊചͬͯ·͢
  2. <!-- index.html --> <script type="text/javascript" src="./greeter.js"></script> <script type="text/javascript" src="./app.js"></script> Plain

    Old JavaScript (ES5) // app.js Greeter.greet('Bob'); // greeter.js var Greeter = { greet: function(name) { alert("Hello, " + name + "!"); } }; • ϑΝΠϧؒͰ
 ໊લۭؒΛڞ༗ • ؔ਺಺ʹ͔͠
 είʔϓ͕ͳ͍ • ΈΜͳͰ໊લͷ
 औΓ߹͍
  3. ES6 Modules <!-- index.html --> <script type="module" src="./app.js"></script> // greeter.js

    const greet = (name) => { alert(`Hello, ${name}!`); } export const Greeter = { greet, }; // app.js import {Greeter} from './greeter.js'; Greeter.greet("hoge"); (SFFUFS͔͠ެ։͞Εͳ͍ ʢHSFFUؔ਺͸Ӆṭ͞ΕΔʣ JNQPSUͨ͠ϞδϡʔϧΛ૊Έ߹Θͤͯ ػೳΛ࡞ΕΔ
  4. const greet = (name) => { alert(`Hello, ${name}!`); } export

    const Greeter = { greet, }; "SSPX'VODUJPOT 5FNQMBUF-JUFSBMT 4IPSUIBOEQSPQFSUZOBNFT
  5. core-js/modules/es.string.pad-start.js 'use strict'; var internalStringPad = require('../internals/string-pad'); var WEBKIT_BUG =

    require('../internals/webkit-string-pad-bug'); // `String.prototype.padStart` method // https://tc39.github.io/ecma262/#sec-string.prototype.padstart require(‘../internals/export') ({ target: 'String', proto: true, forced: WEBKIT_BUG }, { padStart: function padStart(maxLength /* , fillString = ' ' */) { return internalStringPad( this, maxLength, arguments.length > 1 ? arguments[1] : undefined, true); } }); https://github.com/zloirock/core-js/blob/e3b99db/packages/core-js/modules/es.string.pad-start.js
  6. ॳڃऀ޲͚ɿ
 ͜ͷล࢖ͬͯॳظԽ͢ΔͱউखʹೖΔ • Create React App
 https://facebook.github.io/create-react-app/ • Angular CLI


    https://cli.angular.io/ • Vue CLI
 https://cli.vuejs.org/ τϥϯεύΠϧ͸ 5ZQF4DSJQUͰ࣮ݱ ઃఆϑΝΠϧΛ৮Βͤͯ΋Β͑ͳ͍έʔε΋͋Δ ৮Γͨ͘ͳͬͨΒεςοϓΞοϓͷλΠϛϯά