ES 6を深く理解します.モジュールでコードを包装します.

モジュールでコードをカプセル化する
モジュール上部に作成された変数は、グローバル共有スコープ(モジュール上部thisの値はundefined)に自動的に追加されません.エクスポート後に外部コードがアクセスできます.
ブラウザでモジュールを使うのtype が けていたり、javascriptコンテンツタイプ( えば、text/javascript)が まれている はスクリプトとしてロードされます.type が「module」の はサポートモジュールがロードされます(ブラウザがサポートされていないと に になります).

<script type="text/javascript">
  var a = 'a';
script>
<script type="module">
  var b = 'b';
script>

<script>
    console.log(window.a);  // a
    console.log(window.b);  // undefined
script>

:type="module"は、defer を に します.また、モジュールをワードローディングとしても いし、let worker = new Worker("module.js", {type: "module"}).Workカーのスクリプトは、 されたページと じソースからしか み めません.Workカーモジュールは に されない( なクロスドメインリソース ヘッダを するファイルをロードしてアクセスすることができる)
エクスポート

によって された およびクラスステートメントは、defaultキーワードを しない り、 またはクラスを き すことができない が である.また、 または の には、{}

を する があります.

const foo = 'bar';
export foo;   // Error Unexpected token, expected { 
export {foo}; // Correct

を し、エクスポートするときに を することができます.

export { sum as add }
import { add as sum }

モジュールは の

しか できません.
インポート

importは された とどのモジュールから されたかを んでいなければなりません.バインディングを したリストは、デスティネーションオブジェクトと ているように えるが、その は、よりconst を しているように える.

import { identifier1, identifier2} from './example.js'
identifier1 = 1; // Error

より くのブラウザとNode を させるために、モジュールパスを する に、インポートされたファイルを みます.

はモジュール を し、すべての はオブジェクト( )の として

を することができる.

import * as example from './example.js'
example.identifier1;

は、import にモジュールを いても、モジュールは だけ します.モジュールのコードを して すると、 されたモジュールがメモリに されます. のimport は り し できます.アプリケーション の のモジュールも じモジュールに されると、これらのモジュールは じ を しています.これがutil.jsのnew Vue()グローバル の です.

import { identifier1 } from './example.js'
import { identifier2 } from './example.js'

のexampleは だけロードされます.

/*person.js*/
var name = 'ligang'
function setName(newName) {
  name = newName;
}
export {setName, name};

<template>
  <div>
    <p>{{name}}p>
    <button @click="setName">    button>
  div>
template>
<script>
  import {name, setName} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    },
    methods: {
      setName() {
        // name = 'lg';
        setName('lg')
      }
    }
  }
script>

<template>
  <div>
    <p>{{name}}p>
  div>
template>
<script>
  import {name} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    }
  }
script>

person1.vueで「 」ボタンをクリックしてperson2.vueに り えます.name は「lg」になります.ただし、person1.vueで nameを することはできません.import は 、 、クラスのために されたもので、 の のように のバインディングを に するのではなく、リードオンリーバインディングです.

import におけるデフォルト は、 デフォルト の に かなければならない

import sum, {color} from './example.js'

のsumはデフォルトであり、 は デフォルトである.

バインディング なしに、コードのみを し、 にpolyfillとshim

を します.

import './example.js'