ZoeyYoung / blog

博客
1 stars 0 forks source link

Babel 6 import export default 问题 #32

Open ZoeyYoung opened 8 years ago

ZoeyYoung commented 8 years ago

在Babel 5的时候,我们可以这样写

// foo.js
export default {
  foo: 'foo',
  bar: 'bar',
};

// bar.js Babel 5
import foobar, { foo, bar } from './foo';
console.log(foo); // 'foo'
console.log(bar); // 'bar'
console.log(foobar); // { foo: 'foo', bar: 'bar' }

但是到Babel 6的时候,foobar的值为undefined

之前一直不明白为啥Babel 6要改掉这种import default的方式,今天终于通过一个例子想通了

// foo.js
export const foo = 'foo-g'; // 1)
export default {
  foo: 'foo', // 2)
  bar: 'bar',
};

// bar.js Babel 5
import foobar, { foo, bar } from './foo';
console.log(foo); // 'foo-g'
console.log(bar); // undefined 这种时候bar就被隐藏了
console.log(foobar); // { foo: 'foo', bar: 'bar' }
import foobar from './foo'; 相当于 import { default as foobar } from './foo';

import foobar from './foo'; 相当于 import { default as foobar } from './foo';

那么写出import { bar, default as foobar } from './foo';感觉就有点怪怪的了

ZoeyYoung commented 8 years ago

Quick guide: how to update Babel 5.x -> 6.x

从B5升级到B6主要遇到两个问题

分号问题 A semicolon is required after a class property => 这个不理解,无分号党怎么办

export default 和 import 使用问题 => 这个理解了