vue：ES6模塊化規范（默認導出、默認導入、按需導出、按需導入）

ES6模塊化規范是瀏覽器端和服務器端通用的規范，也是前端模塊化開發的趨勢，

每個JS文件都是一個獨立的模塊。暴露模塊成員使用export關鍵字，導入模塊成員使用import關鍵字

通常需要結合babel這個第三方插件在node中來體驗高級的ES6特性。在這里babel是一個語法轉換工具，可以把高級的、有兼容性的js代碼轉換為低級的、沒有兼容性的js代碼。

如何在node項目中通過配置babel來體驗高級的ES6特性？

ES6模塊化的基本語法：

一、默認導出與默認導入

默認導出語法：export default 默認導出的成員

默認導出的成員為私有變量和私有方法

 默認導入語法：import 接收名稱 from ‘模塊標志符’

模塊標志符即文件的路徑，接收名稱自定義，只要合法即可。

打印出一個對象，對象中包含了a,c,show三個屬性。

注意：每個模塊中，只允許使用唯一的一次export default，否則會報錯。

如果模塊中沒有使用export default導出任何成員，那么在導入這個模塊的時候，不會報錯，而是打印出一個空對象。

二、按需導出和按需導入

按需導出語法：export let  s1=10

通過export向外按需導出三個成員。

注意：每個模塊中，可以使用多次按需導出。默認導出只能使用一次。

默認導出有default關鍵字，按需導出沒有default關鍵字。

按需導入語法：import { s1 }  from '模塊標志符'

在from之前用花括號實現按需導入，名稱必須和按需導出的名稱有一一對應關系

有{}花括號的為按需導入，沒有花括號的為默認導入。

為s2通過as關鍵字起了一個別名，叫做ss2.

本模塊中，既有默認導出，又有按需導出，這兩者不會沖突。默認導入與按需導入同時存在時，前面代表默認導入的成員，后面的花括號代表按需導入的成員。

 在導入組件的時候，使用@表示絕對路徑

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')    //<== 這里，具體可以看resolve方法內部 @符號就代表了 磁盤中src的絕對路徑
    }
 },

 以下代碼為什么加上default就報錯了呢？

在index.js中導出時添加default

export default {
  baseUrl,
  baseApi,
  apkUrl,
  rootUrl,
  test,
  http
}

在news.vue中導入http報錯找不到post方法

import {http} from '@/js_sdk/index.js';

其實這樣寫是錯的，因為ES6的import並不是對象解構語法，只是看起來比較像，所以import並不能解構一個default對象。

雖然es6 export default 導出的內容有工具幫你處理，但是 es6 import 不是解構語法。

需要注意的是，在引入一個有默認default輸出的模塊時，這時import命令后面，不使用大括號，不要對引入的內容進行解構。

修改：

將default 去掉即可

export {
  baseUrl,
  baseApi,
  apkUrl,
  rootUrl,
  test,
  http
}