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

野性酷女 2021-12-14 23:07 400阅读 0赞

### ES6 ###

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

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

快速入门：[https://www.jianshu.com/p/8971e2d68470][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

[https_www.jianshu.com_p_8971e2d68470]: https://www.jianshu.com/p/8971e2d68470