美文网首页
12 es6 模块化,相关语法

12 es6 模块化,相关语法

作者: wudimingwo | 来源:发表于2018-12-09 16:53 被阅读0次

第一种,导出

         <!--a.js-->
            必须有变量名
            export let name = 'mike';
            export const abc = "abc";
            export function test () {};
            export class Node {};

第二种,导出

            let name = 'mike';
            const abc = "abc";
            function test () {};
            class Node {};
            export {name, abc, test, Node}

相应的导入

         <!--main.js-->
            import {name,abc,test,node} from "./a.js"

导入的变量只可读?

         <!--main.js-->
            import {name,abc,test,node} from "./a.js"
          console.log(name) / mike
          name = "peter" / 报错

导出时重命名

            let name = 'mike';
            const abc = "abc";
            function test () {};
            class Node {};
            export {name as sex, abc, test, Node}

导入时重命名

         <!--main.js-->
            import {name as sex,abc,test,node} from "./a.js"
          console.log(name) / 报错
          console.log(sex)/  'mike'

设置默认导出


        / 必须是变量
          export let name = 'mike';
            export const abc = "abc";
            export function test () {};
            export class Node {};
            /跟上面的export 不冲突
            / 可以是匿名的, 可以是原始值,
          / 只能有一个
            export default function () {
                console.log("default")
            }
            

相应导入

import {name as aa, abc, test , Node} from "./a.js";
/ 接收时定义变量
import fn from "./a.js";

console.log(aa);

fn();

第二种默认导出

           let name = 'mike';
             const abc = "abc";
             function test () {};
             class Node {};
            
            export {name as default, abc, test, Node};

对应的导入

import {abc, test , Node} from "./a.js";

import name from "./a.js";


console.log(name);


导入整个模块

import * as module from "./a.js";


console.log(module);
console.log(module.abc);/abc
image.png

相关文章

  • 12 es6 模块化,相关语法

    第一种,导出 第二种,导出 相应的导入 导入的变量只可读? 导出时重命名 导入时重命名 设置默认导出 相应导入 第...

  • ES6模块化与CommonJS模块化

    ES6模块化 代表:Vue 语法:导入:import xxx from、import {xxx} from导...

  • gulp-babel编译es6遇到的问题

    gulp-babel编译es6后的require怎么处理? Babel 所做的只是帮你把‘ES6 模块化语法’转化...

  • 前端技能点

    使用过webpack2.0+ 掌握ES6语法 ES6和CommonJS的模块化规范 知道npm和babel的使用 ...

  • 前端H5 SPA选型

    前台规范 ES6语法ES6前端代码规范 前端模块化管理 webpack 构建工具 vue-loader 前端CSS...

  • ES6语法—Module模块化(下)

    上一篇文章讲述了ES6之前的一系列模块化规范,今天我们开始正式探讨ES6语法中的模块化 相信大家也都经历了“过程式...

  • 2、学习react之前要掌握的js基础知识

    判断this指向class【类】es6语法npm包管理器原型、原型链数组常用方法模块化

  • ECMAScript6--19.Module模块化

    1.模块化 基本概念 ES6的模块化语法模块的引入import;模块的导出export; 2.基本用法需求:1.有...

  • ES 6 语法

    ES 6 语法 ES6最重要最复杂的知识点: 1. 类和继承 2.promise 3. ES6模块化(在vue中讲...

  • webpack学习

    ES6模块化的语法学习 a、默认导出,使用export default 默认导出的成员b、默认导入,import ...

网友评论

      本文标题:12 es6 模块化,相关语法

      本文链接:https://www.haomeiwen.com/subject/uhvhhqtx.html