精华内容
下载资源
问答
  • ES6 模块 CommonJS 模块 就是 JavaScript 语言的 两种格式,CommonJS 模块 是node.js 专用。这两种模块不兼容 语法 Node.js ES6 加载 require() import 顺序 同步加载 异步加载 输出 module.exports...

    ES6 模块 和 CommonJS 模块 就是 JavaScript 语言的 两种格式,CommonJS 模块 是node.js 专用。这两种模块不兼容


    语法 Node.js ES6
    加载 require() import
    顺序 同步加载 异步加载
    输出 module.exports export

    下面以文件形式图解区分:

    • .mjs文件总是以 ES6 模块加载
    • .cjs文件总是以 CommonJS 模块加载
    • .js文件的加载取决于package.json里面type字段的设置

    node.js区分
    [注意]: ES6 模块与 CommonJS 模块尽量不要混用。混用乱加载会报错


    同时支持两种格式的模块:配置package.json文件的exports字段,指明两种格式模块各自的加载入口

    "exports"{ 
        "require": "./index.js""import": "./esm/wrapper.js" 
    }
    
    

    上面代码指定require()和import,加载该模块会自动切换到不一样的入口文件。

    展开全文
  • ES6模块和Commonjs的差异 CommonJS 是 nodejs 中的模块化工具,只能使用在服务器端,而ES6模块是 客户端开发的模块化工具,只能使用在客户端 CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。 ...

    ES6模块和Commonjs的差异

    • CommonJS 是 nodejs 中的模块化工具,只能使用在服务器端,而ES6模块是 客户端开发的模块化工具,只能使用在客户端

    • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

    CommonJS

    
    // module.js
      let count = 3;
    const doCount = function(){
        count ++;
    }
    module.exports = {count, doCount};
    // main.js
    let obj = require('./CommonJSModule.js');
    console.log(obj.count); // 3
    obj.doCount();
    console.log(obj.count); // 3
    
    

    变量count没有改变,所以count是拷贝了值

    ES6模块

    // module.js
    let count = 3;
    function doCount(){
        count ++;
    }
    export {count, doCount}; // 导出一个对象
    
    // main.js
    import {count, doCount} from './ES6module.js'; // 属性的解构赋值
    console.log(count); // 3
    doCount(); // count ++
    console.log(count); // 4
    

    变量count发生了改变,所以count是引用的

    • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
      // ES6语法
       if(condition){
            import ....
        }else{
            import ....
        }
        // 报错
    
        // CommonJS语法
        if(condition){
            require('module1') 
        }else{
            require('module2')
        }
        // 允许
    
    • CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。
    • CommonJS 导入的一定是一个对象,但可以使用一个对象变量接受,也可以使用解构赋值,但前者更加常用,ES6一般返回一个对象,一般使用{}解构赋值接收,当然也可以使用 * 接受真的对象, 当有一个default值时,直接返回default,不确定是不是对象
      // ES6模块语法
      // 解构赋值
      import {db, users} from './constants/index.js';
      //  * 作为对象
      import * as obj from './ES6module.js'
      // default
      import mydefault from './default.js';
    
      // Commonjs语法
      const http = require('http');
      const {get,post} = require('./axios');
    
    
    展开全文
  • ES6模块和CommonJS模块相互转换 这里写目录标题ES6模块和CommonJS模块相互转换写在前面ES6模块和CommomJS模块的异同转换原理转换案例注意事项 写在前面 之所以写这样一个专题,是因为我最近在研究VSCode的插件开发的...

    ES6模块和CommonJS模块相互转换

    写在前面

    之所以写这样一个专题,是因为我最近在研究VSCode的插件开发的过程中,习惯性的使用了ES6的模块规范,也就是使用了export import 关键字,结果插件调试的时候空值台报了一个import 关键字相关的错误。自行梳理了一下VSCode插件的技术栈,得知vscode是基于Electron开发的,使用的是nodejs。 因此模块规范采用的是CommonJS模块规范。所有导致上了的错误,定位到问题之后,解决办法就非常简单了,那就是将ES6模块,转换为CommonJS模块。下面就简单说说转换原理和案例。

    为获得更好的阅读和观看体验,推荐访问我在wolai的读书笔记。ES6模块和CommonJS模块相互转换

    ES6模块和CommomJS模块的异同

    • CommonJS

      • 最初为服务端设计,node.js版本。

      • 每个文件即使一个文件,用于独立的作用域。

      • 导出是一个模块向外暴露自己的唯一方式。CommonJS中通过module.exports导出模块中的内容。

      • CommonJS中使用require进行模块的导入。

        如果导入的模块是第一次被加载,这时会首先执行该模块,然后导出执行后的内容
        如果模块曾经被加载过,则直接导出第一次加载时执行后的内容。(相当于是一个静态值了)

    • ES6模块

      • 每个文件作为一个模块,每个模块拥有独立的作用域。

      • 通过exports导出

        命名导出:exports { a, b }
        默认导出:exports default a; (只能导出一个对象)

      • 通过**import **导入,默认导出的变量,导入时可以随意命名,命名导出方式,导入时名称必须一致,可以使用as 重命名。

    • CommonJS 与ES6模块的区别

      1. CommonJS 对模块依赖的解决是动态的,而ES6模块是静态的。
      2. 模块导入时:CommonJS是值拷贝,而ES6则是只读的动态映射。
      • 动态:模块的依赖关系建立在代码运行阶段

      • 静态:模块的依赖关系建立在代码编译阶段

      • CommonJS引入模块时可以动态指定,例如使用if等条件语句引入不同的模块。

    • ES6模块相比CommonJS的优势

      • 死代码检测和排除:通过静态分析工具检测出哪些模块没有被调用过。从而在打包时去掉未使用的模块,以减少资源包的体积。

      • 模块变量类型检查:JS是动态类型语言,不会在代码执行前检查类型错误,ES6模块属于静态类型模块,有助于确保模块之间的传递的值或者接口类型是正确的。

      • 编译器优化:CommonJS无论采用哪种方式,导入的都是一个对象,而ES6模块直接导入变量,减少应用层级,程序效率更高。

    转换原理

    可以看到无论是ES6还是CommonJS 对模块的定义都是一致的,每个文件即是一个模块,拥有独立的作用域。不同点在于ES6模块通过export 导出,通过import 导入;而CommonJS则是通过module.exports导出,通过require导入。那么是不是说只需将导出和引入的语法关键字改一下就可以了呢?下面就通过实践来看一看吧。

    转换案例

    下面通过将ES6模块转换为CommonJS模块进行演示,反之则是CommonJS转ES6模块。

    • 案例1 export default

    ES6模块

     // a.js
    
    export default function () {
      console.log("hello world");
    }
    
    
    //  index.js 
    import a from "./a.js";   // 默认导出可以自由命名
    a();
    

    转换为对应的common JS模块

    //  a.js
    module.exports = function(){
      console.log("hello world");
    } 
    
    // index.js 
    
    const a = require("./a.js");
    a(); 
    
    • 案例2 export { a, b }

    ES6 模块

    //  a.js
    const a = {
      name: "mingyong.g",
    };
    
    const fun = function () {
      console.log("hello world");
    };
    
    export { a, fun }; 
    
    //  index.js
    import { a, fun } from "./a.js";  // 导入时名字必须和导出时的命名一致
    console.log(a);
    fun(); 
    

    CommonJS模块

    // a.js
    const a = {
      name: "mingyong.g",
    };
    
    const fun = function () {
      console.log("hello world");
    };
    
    module.exports = {
      a,
      fun,
    };
    
    // 或者使用下面这种方式导出
    
    module.exports.a = a;
    module.exports.fun = fun; 
    
    // index.js 
    const module = require("./a.js")   // 导入的是一个整体,是{a:a,fun:fun}形式
    const a = module.a;
    const fun = module.fun; 
    

    注意:上面的CommonJS模拟的是node.js环境,故通过module.exports导出CommonJS模块,而非直接使用exports.

    注意事项

    1. CommonJS 模块导出的其实是一个对象,相当于一开始module.exports = {} 是一个空对象,然后在这个空对象里面事项了属性和方法,并将整个对象导出。

    2. 在导入一个模块时,CommonJS导入的是一份导出值得拷贝,允许对导入的值进行修改。

    3. ES6导出的则是值得动态映射,且该值是只读的。(一改全改,但只能在模块内部改动)


    本文同步发布于G众号"前端知识营地",点击关注,获取更多优质有趣的内容。


    (完)

    展开全文
  • 1)ES6输入的模块变量,只是一个符号链接,所以这个变量是只读的,对它重新进行赋值...2)CommonJS模块输出的是一个值的拷贝,ES6模块输出的是一个值的引用 3)CommonJS模块是运行时加载,ES6模块是编译时输出接口 ...

    1)ES6输入的模块变量,只是一个符号链接,所以这个变量是只读的,对它重新进行赋值会报错

    2)CommonJS模块输出的是一个值的拷贝,ES6模块输出的是一个值的引用

    3)CommonJS模块是运行时加载,ES6模块是编译时输出接口

    展开全文
  • CommonJS模块输出是一个值的拷贝,ES6模块输出的值是引用 CommonJS是运行时候加载,ES6模块的编译的时候输出接口 CommonJS是require()同步加载模块,ES6模块是import命令是异步加载,有一个独立的模块依赖的解析阶段...
  • CommonJS和AMD本质上是用一个全局变量定义了一个命名空间 以sea.js为例,各个模块输出...CommonJS和AMD是运行时加载,ES6模块是编译时加载 这个区别能解释上一个区别,这也是二者区别最本质的根源。 CommonJS和A...
  • 模块化规范:即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢 —— 全局变量就是它的模块化规范。 require/exports 出生在野生规范当中,什么叫做野生...
  • ES6 模块CommonJS 模块的差异

    千次阅读 2018-05-10 23:07:16
    前面我们已经对ES6的模块化规划和CommonJs的模块化规范已经介绍过了,所以今天我们主要聊聊这两种模块化的差异,如果对这两种模块化规范不是特别了解的,可以点击ES6模块化规范和CommonJs模块化规范ES6 模块与 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,526
精华内容 610
关键字:

es6模块和commonjs