es6新特性之import和export的介绍并引出babel的问题

 在es6之前，javascript并不支持模块化的编程，这个缺点让js很难开发大型的项目，如果能将功能拆分成一个个的小文件，再在需要使用的时候按需加载进来就好了，这样既解决了不重复编程的问题，也让文件管理起来显得更加井井有条。像java里面有import，python里面也有import，ruby里面有require，css里面我记得也有@import，但是js里面却没有，怎么办呢？还是在es6之前，模块化编程亟待解决，js的一些社区就制定出了CommonJS和AMD以及CMD这些模块化编程规范并实现了，这些规范我之前都大致的介绍过了。令人感到兴奋的是，在es6里，javascript第一次在语言层面上实现了模块化，而其根本就是我们本次要说的import和export。

前提，假设你已经使用命令安装了babel并配置了.babelrc：

npm install -g babel-cli
npm install --save-dev babel-cli

.babelrc:

{
    "presets":["es2015"]
}

babel并不能识别es6的所有语法，比如这里的import和exprot。

编写demo.js:

import {a} from './a.js'
console.log(a);

编写a.js:

export var a=10;

执行命令babel demo.js --out-file dist/demo_compiled.js。

查看被babel转化后的demo_compiled.js，实际开发中我们的html页面引入demo_compiled.js即可，但查看demo_compiled.js的代码：

'use strict';

var _a = require('./a.js');

console.log(_a.a);

被babel转化后的代码竟然是这样不对啊，es5里面并没有require呀。所以说babel并不能完全转码es6.怎么解决这个问题呢？我们可以使用webpack+babel-loader来解决。请参考文章“es6开发环境的搭建-----webpack的安装”。