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

実践ES Modules

実践ES Modules

初夏のJavaScript祭2018の登壇資料です。

Yosuke Onoue

May 19, 2018
Tweet

More Decks by Yosuke Onoue

Other Decks in Technology

Transcript

  1. &4.PEVMFTʁ w +BWB4DSJQUඪ४ͷϞδϡʔϧγεςϜ 1 import defaultExport from 'module-name' 2 3

    export default { 4 value: 123 5 } 1 const defaultExport = require('module-name') 2 3 module.exports = { 4 value: 123 5 } $PNNPO+4 /PEFKT &4.PEVMFT
  2. *NQPSU import defaultExport from 'module-name' import * as name from

    'module-name' import { export } from 'module-name' import { export as alias } from 'module-name' import { export1 , export2 } from 'module-name' import { export1 , export2 as alias2 , [...] } from 'module-name' import defaultExport, { export [ , [...] ] } from 'module-name' import defaultExport, * as name from 'module-name' import 'module-name' IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTJNQPSU
  3. &YQPSU IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTFYQPSU export { name1, name2, …, nameN } export

    { variable1 as name1, variable2 as name2, …, nameN } export let name1, name2, …, nameN // also var export let name1 = …, name2 = …, …, nameN // also var, const export function FunctionName(){...} export class ClassName {...} export default expression export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … } export * from … export { name1, name2, …, nameN } from … export { import1 as name1, import2 as name2, …, nameN } from … export { default } from …
  4. &4.PEVMFTͷ͜Ε·Ͱ w &$."4DSJQUͰจ๏͕ඪ४Խʢ೥ʣ w CBCFMʹΑΔରԠʢ೥ʙʣ w &4.PEVMFTΛ$PNNPO+4ελΠϧʹτϥϯεύΠϧ w Ϟδϡʔϧόϯυϥʔʢ೥ॳ಄ʙʣ w

    8FCQBDL͔Β͸&4.PEVMFTΛαϙʔτ w /PEFKTʢ೥ʙʣ w ϑϥά෇͖ͰαϙʔτʢWʣ w 8FCϒϥ΢βͷରԠʢ೥ʣ ˞೥਺͸େࡶ೺
  5. ϒϥ΢βωΠςΟϒͷ&4.PEVMFT w UZQFNPEVMFͷTDSJQUཁૉ w TSDଐੑΠϯϥΠϯ྆ํ0, w Ϟδϡʔϧ͸63-Ͱࢦఆ 1 <script type="module">

    2 import f, {x as value} from './mod.js' 3 4 alert(f(value)); 5 </script> ⭕ɿIUUQTFYBNQMFDPNNPEKT NPEKT NPEKT ❌ɿNPEKT NPE
  6. ྫ 1 <script type="module"> 2 import f, {x as value}

    from './mod.js' 3 4 alert(f(value)); 5 </script> JOEFYIUNM 1 import {y} from './submod.js' 2 3 export const x = y + 23 4 5 export default (value) => { 6 return 2 * value 7 } NPEKT 1 export const y = 100 TVCNPEKT
  7. ʢ੩తʣ*NQPSU&YQPSUͷ੍໿ 1 import {x} from './submod.js' 2 3 if (x

    % 2 == 0) { 4 import './optional-mod.js' 5 } 6 7 if (x % 2 == 1) { 8 export default 234 9 } ❌ɿಈతͳ*NQPSU&YQPSU 1 const x = 10 2 3 import `./mod${x}.js` ❌ɿϞδϡʔϧ໊ͷಈతͳղܾ ˞$PNNPO+4ͰͷSFRVJSFͰ͸Մೳͩͬͨ
  8. %ZOBNJD*NQPSU w JNQPSU NPEVMFOBNF  w Ϟδϡʔϧ໊͸+BWB4DSJQUͷจࣈྻΛͱΔ w Ϟδϡʔϧͷ1SPNJTFΛฦ͢ w

    IUUQTHJUIVCDPNVVQBBEZOBNJDJNQPSUQPMZpMM 1 <script type="module"> 2 import {x} from './mod1.js' 3 4 const modName = x % 2 == 0 ? './mod2.js' : './mod3.js' 5 6 import(modName).then((module) => { 7 alert(module.f(x)) 8 }) 9 </script>
  9. ྫ 1 export const x = 100 1 export const

    f = (v) => 2 * v 1 export const f = (v) => v + 2 1 <script type="module"> 2 import {x} from './mod1.js' 3 4 const modName = x % 2 == 0 ? './mod2.js' : './mod3.js' 5 6 import(modName).then((module) => { 7 alert(module.f(x)) 8 }) 9 </script> JOEFYIUNM NPEKT NPEKT NPEKT
  10. 8FC$PNQPOFOUT w 8FCͷίϯϙʔωϯτԽͷͨΊͷඪ४"1*܈ w $VTUPN&MFNFOUT w 4IBEPX%0. w )5.-5FNQMBUF w

    )5.-*NQPSUT w &4.PEVMFT΁ͷํ਑มߋ IUUQTXXXXFCDPNQPOFOUTPSH
  11. ίϯϙʔωϯτͷ࡞੒ྫ 1 import {html, render} from 'https://unpkg.com/[email protected]/lit-html.js' 2 3 const

    template = () => html` 4 <style> 5 p { 6 color: red; 7 } 8 </style> 9 <p> 10 <slot /> 11 </p> 12 ` 13 14 export class MyElement extends window.HTMLElement { 15 constructor () { 16 super() 17 this.attachShadow({mode: 'open'}) 18 } 19 20 connectedCallback () { 21 render(template(), this.shadowRoot) 22 } 23 } NZFMFNFOUKT
  12. ίϯϙʔωϯτͷར༻ྫ 1 import {MyElement} from './my-element.js' 2 3 window.customElements.define('my-element', MyElement)

    1 <p>Hello,</p> 2 <my-element>WebComponents</my-element> 3 <p>World!</p> 4 <script type="module" src="./main.js" async></script> NBJOKT JOEFYIUNM
  13. 131-ύλʔϯ w 1VTI 3FOEFS 1SFDBDIF -B[ZMPBE w ϝϦοτ w 55*ʢ5JNF5P*OUFSBDUJWFʣͷ࠷খԽ

    w Ωϟογϡޮ཰ͷ࠷େԽ w ։ൃɾσϓϩΠϝϯτͷ؆ૉԽ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
  14. ܰྔͳ-B[ZMPBEJOHͷ࣮૷ྫ 1 import UniversalRouter from './universal-router.js' 2 3 export const

    router = new UniversalRouter([ 4 { 5 path: '', 6 action: () => ({redirect: '/posts'}) 7 }, 8 { 9 path: '/posts', 10 children: [ 11 { 12 path: '', 13 action: (context) => { 14 import('./pages/post-list.js').then((action) => action(context)) 15 } 16 }, 17 { 18 path: '/:postId', 19 action: (context) => { 20 import('./pages/post-detail.js').then((action) => action(context)) 21 } 22 } 23 ] 24 } 25 ])
  15. $PNNPO+4ϞδϡʔϧΛ&4.PEVMFTͰ࢖͏ w SPMMVQKTΛ࢖͏ 1 import commonjs from 'rollup-plugin-commonjs' 2 import

    resolve from 'rollup-plugin-node-resolve' 3 4 export default { 5 input: 'node_modules/universal-router/main.js', 6 output: { 7 file: 'public/vendor/universal-router.js', 8 format: 'es' 9 }, 10 plugins: [ 11 commonjs(), 12 resolve() 13 ] 14 } $ rollup -c rollup.config.js SPMMVQDPOpHKT
  16. /PEFKTͷಈ޲ w ֦ுࢠʮNKTʯ w FYQFSJNFOUBMNPEVMFTʢ/PEFKTWʙʣ w /PEFKTWͷ-54͔Βຊ֨ར༻͔ 1 import v

    from './sub.mjs' 2 3 console.log(v) 1 export default 123 NBJONKT TVCNKT $ node --experimental-modules main.mjs
  17. &4.PEVMFTͷΠϚ w ଟ͘ͷݱ৔ͷϫʔΫϑϩʔ͸8FCQBDLʹґଘ w த਎͸݁ہ$PNNPO+4 w &4.PEVMFTωΠςΟϒͰಈ࡞͢ΔϥΠϒϥϦͷগͳ͞ w த਎͸݁ہ$PNNPO+4 w

    /PEFKTɺ'JSFGPYɺ&EHFɺ)551αʔόͷ࣮૷ঢ়گ w ࠷৽ಈ޲ʹ஫ҙͯ͠Ϟδϡʔϧόϯυϥʔ࢖༻͕ແ೉ʁ w 8FCQBDLͷਐԽPS୅ସπʔϧͷීٴΛ଴ͭ