[js] ES6 学习 import 和 export命令以及babel转es5

ES6

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

快速入门：https://www.jianshu.com/p/8971e2d68470

export

在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能

1.相关语法

export var m = 1;
// 等价于
var m = 1;
export { m }

// 导出多个
var a = 1;
var b = 2;
var c = 3;
export { a, b, c }
// 导出对象
export const student = {
  name: 'Megan',
  age: 18
}
// 导出函数
export function add(a, b) {
  return a + b;
}
//导出接口别名
const person = {
  name: '张呆',
  age: 18,
  gender: "male"
}
export { person as boy }

2. export default

//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default var i = 0;

导出语法

export导出语法

// default exports
export default 42;
export default {};
export default [];
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar; // lazy initialization
export let foo = 2;
export let bar; // lazy initialization
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

import

语法：

import导入语法

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import * as bar, {baz as xyz} from "foo";
import foo, * as bar, {baz as xyz} from "foo";

示例：

注意事项

导入语句只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面
if(Math.random()>0.5){
  import './module1.js'; // SyntaxError: Unexpected keyword 'import'
}
const import2 = (import './main2.js'); // SyntaxError
try{
  import './module3.js'; // SyntaxError: Unexpected keyword 'import'
}catch(err){
  console.error(err);
}
const moduleNumber = 4;

import module4 from `module${moduleNumber}`; // SyntaxError: Unexpected token

import 语句会被提升到文件顶部执行，也就是说在模块初始化的时候所有的 import 都必须已经导入完成
import './module1.js';
alert('code1');

import module2 from './module2.js';
alert('code2');

import module3 from './module3.js';

babel

初始化工程

npm init

配置.balbelrc文件添加

{
  "presets": [],
  "plugins": []
}

安装依赖环境

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
 
# react转码规则
$ npm install --save-dev babel-preset-react
 
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

将配置的规则加入.balbelrc

  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

安装babel-cli工具
$ npm install --save-dev babel-cli

转换

npm run build