javascript - Es 6問題 Import

Question

Import * as xxx from 'Xxx ' 和
Import xxx from 'xxx'
有什麼差別？
同時，在vuex裡面，為什麼可以用var xxx= require('Xxx ')代替第二個寫法，而代替第一個卻不可以

Answer 1

第一個問題：

除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對像上面。

下面是一個circle.js文件，它输出两个方法area和circumference。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

現在，載入這個模組。

// main.js

import { area, circumference } from './circle';

console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

上面寫法是逐一指定要載入的方法，整體載入的寫法如下。

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

來自阮一峰的ECMAScript6這本書
希望樓主可以看懂

Answer 2

可以看看這篇文章
http://es6.ruanyifeng.com/#do...

Answer 3

import的寫法與你import的模組的export相關

根據上圖，import xxx from 'XXX'是將XXX中的export default在本模組中命名為xxx
而var xxx = require('XXX');也是將XXX中的export default在本模組中命名為xxx，故可以替換；
import * as xxx from 'XXX';則是將XXX中的所有export在本模組中命名為xxx，XXX中有export function A(){...}，則可以用xxx.A()來引用。