精华内容
下载资源
问答
  • 2022-04-10 16:47:07

    1,使用环境

    • CommonJS模块的require语法是同步的,导致CommonJS模块规范只适合用在服务端。因为如果在浏览器端使用同步的方式加载一个模块,需要有网络来决定快慢,响应时间可能会很长。
    • ES6模块无论在浏览器端还是服务端都是可以使用的,但是在服务端,还需要遵循一些特殊的规则才能使用。

    2,输出方式不同

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

    CommonJS-值的拷贝

    CommonJS输出的是值的拷贝,换句话说,一旦输出了某个值,模块内部后续的变化影响不了外部对这个值的使用

    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      counter: counter,
      incCounter: incCounter,
    };
    

    然后我们在其它文件中使用这个模块:

    var mod = require('./lib');
    console.log(mod.counter);  // 3
    mod.incCounter();
    console.log(mod.counter); // 3
    

    上面的例子证明,如果我们对外输出了conter变量,就算后续调用模块内部的incCounter方法去修改它的值,它的值也不会变化

    ES6模块-值的引用

    ES6模块运行机制完全不一样,JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行的时候,再根据这个只读引用,到被加载的那个模块里去取值。

    // lib.js
    export let counter = 3;
    export function incCounter() {
      counter++;
    }
    
    // main.js
    import { counter, incCounter } from './lib';
    console.log(counter); // 3
    incCounter();
    console.log(counter); // 4
    

    上面证明,ES6模块import的变量counter是可变的,完全反应它在模块lib.js内部的变化

    3,运行时加载和编译时加载

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

    CommonJS-运行时加载

    // CommonJS模块
    let { stat, exists, readfile } = require('fs');
    
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;
    

    上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”

    ES6模块-编译时加载

    import { stat, exists, readFile } from 'fs';
    

    上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

    小结

    CommonJS其实加载的是一个对象,这个对象只有在脚本运行时才会生成,而且只会生成一次。但是ES6模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成,这样我们就可以使用各种工具对JS模块进行依赖分析,优化代码,而Webpack中的 tree shaking 和 scope hoisting 实际上就是依赖ES6模块化。

    4,互相引用

    • ES6模块中,是支持加载CommonJS模块的
    • 但是,CommonJS并不支持requireES6模块

    总结

    • 因为CommonJS的require语法是同步的,导致CommonJS只适合用于服务端;而ES6模块在浏览器端和服务器端都是可用的,但是在服务端需要遵循特殊的规则
    • CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用
    • CommonJS模块是运行时加载;ES6模块是编译时输出的接口,方便对JS模块进行静态分析
    • 关于互相引用问题,ES6模块中支持加载CommonJS;而CommonJS不支持引用ES6模块
    更多相关内容
  • 趁着这个机会,将commonjs模块与es6模块之间一些重要的的区别做个总结。语法上有什么区别就不具体说了,主要谈谈引用的区别commonjs 对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该...
  • ES6模块的运行机制和CommonJS不一样,遇到模块加载命令import时不去执行这个模块,只会生成一个动态的只读引用,等真的需要用到这个值时,再到模块中取值,也就是说原始值变了,那输入值也会发生变化。 那CommonJS和...
  • commonJS和ES6模块化的区别

    千次阅读 2020-12-11 15:38:17
    commonJS和ES6模块化一、简述区别1.语法差异2. 什么是运行时加载呢?3. 什么是编译时加载或静态加载呢?4.在 Node.js 中使用模块化,ES6 模块与 CommonJS 模块差异二、commonJS三、ES6模块化1.语法2.在浏览器中使用...

    一、简述区别

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
    ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

    1.语法差异

    • CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。而ES6模块化在浏览器和node.js中都可以用。
    • 语法上面,两者最明显的差异是,CommonJS 模块使用require()和module.exports,ES6 模块使用import和export。
    • 在node.js使用模块化,需要将 CommonJS 脚本的后缀名都改成.cjs,ES6 模块采用.mjs后缀文件名。或者修改package.son里面的文件,type字段为module或commonjs。

    2. 什么是运行时加载呢?

    // CommonJS模块
    let { stat, exists, readfile } = require('fs');
    
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;
    

    上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。

    3. 什么是编译时加载或静态加载呢?

    // ES6模块
    import { stat, exists, readFile } from 'fs';
    

    上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

    4.在 Node.js 中使用模块化,ES6 模块与 CommonJS 模块差异

    它们有三个重大差异。

    1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
      注意:CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值
      ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
    2. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
      原因:CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
    3. CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。

    上述差异1举例:

    • commonjs
    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      counter: counter,
      incCounter: incCounter,
    };
    
    // main.js
    var mod = require('./lib');
    
    console.log(mod.counter);  // 3
    mod.incCounter();
    console.log(mod.counter); // 3
    //lib.js模块加载以后,它的内部变化就影响不到输出的mod.counter了。
    //这是因为mod.counter是一个原始类型的值,会被缓存。
    //除非写成一个函数,才能得到内部变动后的值。
    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      get counter() {
        return counter
      },
      incCounter: incCounter,
    };
    
    • ES6
    // lib.js
    export let counter = 3;
    export function incCounter() {
      counter++;
    }
    
    // main.js
    import { counter, incCounter } from './lib';
    console.log(counter); // 3
    incCounter();
    console.log(counter); // 4
    //ES6 模块输入的变量counter是活的,完全反应其所在模块lib.js内部的变化。
    

    二、commonJS

    CommonJS模块基本上包括两个基础的部分:一个取名为exports的自由变量,它包含模块希望提供给其他模块的对象,以及模块所需要的可以用来引入和导出其它模块的函数。
    模块功能主要由两个命令构成require()和 module.exports属性

    1. 基本用法

    • export
    //module对象:在每一个模块中,module对象代表该模块自身。
    //export属性:module对象的一个属性,它向外提供接口。
    //node为每一个模块提供了一个exports变量(可以说是一个对象),指向 module.exports。这相当于每个模块中都有一句这样的命令 var exports = module.exports;
    
    //定义需要导出的对象
    function foobar(){
      this.foo = function(){
        console.log( "Hello foo" );
      }
    
      this.bar = function(){
        console.log( "Hello bar" );
      }
    }
    
    //将要导出的对象添加到expor对象中
    exports.foobar = foobar;
    
    • require
    var math=require('math');
    //命名的变量名和引入的模块名不必相同
    var Math=require('math');
    //带路径和不带路径
    //如果当前目录没有node_modules目录就必须要写路径
    var add=require('./add.js')
    
    
    

    三、ES6模块化

    模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

    1.语法

    • export:
    // 写法一
    export var m = 1;
    
    // 写法二
    var m = 1;
    export {m};
    
    // 写法三
    var n = 1;
    export {n as m};
    
    //export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。上面代码输出变量foo,值为bar,500 毫秒之后变成baz。
    export var foo = 'bar';
    setTimeout(() => foo = 'baz', 500);
    
    • export default
      为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
    // export-default.js
    export default function () {
      console.log('foo');
    }
    //其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
    // import-default.js
    import customName from './export-default';
    customName(); // 'foo'
    // export-default.js
    //非匿名函数也是可以的
    export default function foo() {
      console.log('foo');
    }
    
    
    • import:
    //import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
    //import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。
    //如果import里面是一个对象,改写对象的属性是允许的。不过,这种写法很难查错,建议凡是输入的变量,都当作完全只读,不要轻易改变它的属性。
    import { firstName, lastName, year } from './profile.js';
    
    function setName(element) {
      element.textContent = firstName + ' ' + lastName;
    }
    
    • import()动态加载
    // 报错
    if (x === 2) {
      import MyModual from './myModual';
    }
    

    上面代码中,引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在if代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,import和export命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。

    const path = './' + fileName;
    const myModual = require(path);
    

    上面的语句就是动态加载,require到底加载哪一个模块,只有运行时才知道。import命令做不到这一点。因为require是运行时加载模块,import命令无法取代require的动态加载功能。
    ES2020提案 引入import()函数,支持动态加载模块。

    //import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载。
    import(specifier)
    
    //import()返回一个 Promise 对象。下面是一个例子。
    const main = document.querySelector('main');
    
    import(`./section-modules/${someVariable}.js`)
      .then(module => {
        module.loadPageInto(main);
      })
      .catch(err => {
        main.textContent = err.message;
      });
    

    import()函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。另外,import()函数与所加载的模块没有静态连接关系,这点也是与import语句不相同。
    注意点:import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数
    import()也可以用在 async 函数之中:

    async function main() {
      const myModule = await import('./myModule.js');
      const {export1, export2} = await import('./myModule.js');
      const [module1, module2, module3] =
        await Promise.all([
          import('./module1.js'),
          import('./module2.js'),
          import('./module3.js'),
        ]);
    }
    main();
    

    2.在浏览器中使用ES6模块

    浏览器加载 ES6 模块,也使用<script>标签,但是要加入type="module"属性。

    <script type="module" src="./foo.js"></script>
    //浏览器对于带有type="module"的<script>,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了<script>标签的defer属性。
    <!-- 等同于 -->
    <script type="module" src="./foo.js" defer></script>
    

    四、在 Node.js 中使用模块化

    1. 在Node.js 中使用ES6模块

    Node.js 要求 ES6 模块采用.mjs后缀文件名。
    如果不希望将后缀名改成.mjs,可以在项目的package.json文件中,指定type字段为module。

    {
       "type": "module"
    }
    

    2. 在Node.js 中使用commonjs模块

    Node.js 要求 ES6 模块采用.cjs后缀文件名。
    如果不希望将后缀名改成.cjs,可以在项目的package.json文件中,指定type字段为commonjs。

    {
       "type": "commonjs"
    }
    

    3.package.json 的 main 和exports字段

    package.json文件有两个字段可以指定模块的入口文件:main和exports。比较简单的模块,可以只使用main字段,指定模块加载的入口文件。

    • main
    {
      "type": "module",
      "main": "./src/index.js"
    }
    //上面代码指定项目的入口脚本为./src/index.js,它的格式为 ES6 模块。如果没有type字段,index.js就会被解释为 CommonJS 模块。
    
    • export
      exports字段的优先级高于main字段。它有多种用法。
    1. 子目录别名
    {
      "exports": {
        "./submodule": "./src/submodule.js"
      }
    }
    //上面的代码指定src/submodule.js别名为submodule,然后就可以从别名加载这个文件。
    
    1. main 的别名
    // exports字段的别名如果是.,就代表模块的主入口,优先级高于main字段,并且可以直接简写成exports字段的值。
    {
      "exports": {
        ".": "./main.js"
      }
    }
    // 等同于
    {
      "exports": "./main.js"
    }
    
    //由于exports字段只有支持 ES6 的 Node.js 才认识,所以可以用来兼容旧版本的 Node.js。
    {
      "main": "./main-legacy.cjs",
      "exports": {
        ".": "./main-modern.cjs"
      }
    }
    
    1. 条件加载
    //利用.这个别名,可以为 ES6 模块和 CommonJS 指定不同的入口。目前,这个功能需要在 Node.js 运行的时候,打开--experimental-conditional-exports标志。
    {
      "type": "module",
      "exports": {
        ".": {
          "require": "./main.cjs",
          "default": "./main.js"
        },
        //别名
        "./feature": "./lib/feature.js",
      }
    }
    
    展开全文
  • commonjs和esmodule有什么区别

    CommonJS和ES6模块有什么区别!

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

    commonjs的用法,我们一起来看一下

    1.首先创建一个lib.js的文件

    // lib.js
    const counter = 3;
    const incCounter = ()=>{
      counter++
    }
    
    module.exports = {
      counter,
      incCounter
    }
    
    

    2.再次创建一个main.js,使用commonjs的方式导入

    // main.js
    var lib = require('./lib');
    console.log(lib)
    console.log(lib.counter);  // 3
    lib.incCounter();
    console.log(lib.counter); // 3
    

    lib.js模块加载以后,它的内部变化就影响不到输出的lib.counter了。这是因为mod.counter是一个原始类型的值,会被缓存;

    esmodule的用法,我们一起来看一下

    // lib.js
    export let counter = 3;
    export function incCounter () {
      counter++;
    }
    
    // main.js
    import { counter, incCounter } from './util.mjs'
    
    console.log(counter);  //3 
    incCounter()
    console.log(counter)  //4 
    
    

    ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。

    补充:通过esmodule导入的变量是不能重新赋值修改的。

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

    // CommonJS模块
    let { stat, exists, readFile } = require('fs');
     
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;
    

    上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。因此commonjs属于再运行时才会加载模块的方式。

    import { stat, exists, readFile } from 'fs';
    

    上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高;

    三、CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段

    同步加载:所谓同步加载就是加载资源或者模块的过程会阻塞后续代码的执行;
    异步加载:不会阻塞后续代码的执行;

    我们来看一个案例,创建如下的目录;

    | -- a.js
    | -- index.js
    | -- c.js
    
    
    // a.js
    console.log('a.js文件的执行');
    const importFun = () => {
      console.log(require('./c').c);
    }
    
    importFun()
    
    
    module.exports = {
      importFun
    }
    
    // index.js
    const A = require('./a');
    console.log('index.js的执行');
    
    // c.js
    console.log('c.js的运行');
    
    const c = 3
    
    module.exports = {
      c
    }
    
    

    执行命令 node index.js

    // a.js文件的执行
    // c.js的运行
    // 3
    // index.js的执行
    

    我们会发现,require的内容会阻塞后续代码的执行。因为c.js先打印出来,然后在是index.js的打印,所以说require()是同步加载的;

    // a.js
    console.log('a.js文件的执行');
    export const importFun = () => {
      import('./c.js').then(({c})=>{
        console.log(c)
      })
    }
    
    importFun()
    
    
    // index.js
    import {importFun} from './a.js'
    console.log('index.js的执行');
    
    // c.js
    console.log('c.js的运行');
    
    export const c = 3
    
    
    // 结果
    // a.js文件的执行
    // index.js的执行
    // c.js的运行
    // 3
    

    可以看的出来:import()是异步加载资源的,因为c.js是在index.js的后面打印出来的,并不会阻塞后续代码的执行;

    总结:以上便是commonjs和esmodule的几个区别

    1: CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
    2: CommonJS 模块是运行时加载,ES6 模块是编译时输出接口
    3: CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段

    展开全文
  • CommonJSES6模块化规范区别

    千次阅读 2022-04-23 22:21:29
    CommonJSES6模块化规范区别

    CommonJS 、ES6模块化规范区别

    一、什么是CommonJS

    我们知道Node.js的实现让js也可以成为后端开发语言,
    但在早先Node.js开发过程中,它的作者发现在js中并没有像其他后端语言一样有包引入和模块系统的机制。
    这就意味着js的所有变量,函数都在全局中定义。这样不但会污染全局变量,更会导致暴露函数内部细节等问题。
    CommonJS组织也意识到了同样的问题,于是 CommonJS组织创造了一套js模块系统的规范。我们现在所说的CommonJS指的就是这个规范。

    CommonJS 规定:

    (1)每个模块内部,module 变量代表当前模块。

    (2)module 变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。

    (3)加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。

    二、两者区别

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
    ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

    1.语法上的差异

    • CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。而ES6模块化在浏览器和node.js中都可以用。
    • 语法上面,两者最明显的差异是,CommonJS 模块使用require()和module.exports,ES6 模块使用import和export。
    • 在node.js使用模块化,需要将 CommonJS 脚本的后缀名都改成.cjs,ES6 模块采用.mjs后缀文件名。或者修改package.son里面的文件,type字段为module或commonjs。

    2. 什么是运行时加载呢?

    // CommonJS模块
    let { stat, exists, readfile } = require('fs');
    
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;
    

    以上代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。

    3. 什么是编译时加载或静态加载呢?

    // ES6模块
    import { stat, exists, readFile } from 'fs';
    

    这个代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

    4.在 Node.js 中使用模块化,ES6 模块与 CommonJS 模块差异

    • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
      注意:CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
    • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
      原因:CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
    • CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。
      commonjs举例:
    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      counter: counter,
      incCounter: incCounter,
    };
    
    // main.js
    var mod = require('./lib');
    
    console.log(mod.counter);  // 3
    mod.incCounter();
    console.log(mod.counter); // 3
    //lib.js模块加载以后,它的内部变化就影响不到输出的mod.counter了。
    //这是因为mod.counter是一个原始类型的值,会被缓存。
    //除非写成一个函数,才能得到内部变动后的值。
    // lib.js
    var counter = 3;
    function incCounter() {
      counter++;
    }
    module.exports = {
      get counter() {
        return counter
      },
      incCounter: incCounter,
    };
    

    ES6举例:

    // lib.js
    export let counter = 3;
    export function incCounter() {
      counter++;
    }
    
    // main.js
    import { counter, incCounter } from './lib';
    console.log(counter); // 3
    incCounter();
    console.log(counter); // 4
    //ES6 模块输入的变量counter是活的,完全反应其所在模块lib.js内部的变化。
    

    三、在 Node.js 中使用模块化

    1. 在Node.js 中使用ES6模块

    Node.js 要求 ES6 模块采用.mjs后缀文件名。如果不希望将后缀名改成.mjs,可以在项目的package.json文件中,指定type字段为module。

    {
       "type": "module"
    }
    

    2. 在Node.js 中使用commonjs模块

    Node.js 要求 ES6 模块采用.cjs后缀文件名。
    如果不希望将后缀名改成.cjs,可以在项目的package.json文件中,指定type字段为commonjs。

    {
       "type": "commonjs"
    }
    
    展开全文
  • CommonJS和ES6模块

    2021-05-08 22:14:00
    ES6模块不是对象,编译时就可以确定模块之间的依赖关系;在编译的时候就可以完成模块的加载 ES6模块的要点 exportimport可以出现在模块顶层的任何地方,但是不能出现在块级作用域,出现在块级作用域就不可以静态...
  • 1.CommonJs模块化规范 导入: let { firstName, lastName } = require('./1-module.js'); 导出: module.exports={}; 2.AMD模块化规范 AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块...
  • CommonJS模块规范使用require语句导入模块,module.exports导出模块,输出的是值的拷贝,模块导入的也是输出值的拷贝...ES6模块的运行机制和CommonJS不一样,遇到模块加载命令import时不去执行这个模块,只会生成一...
  • 1.CommonJS模块化开发 (1)创建工具类 //工具类 const sum = function(a,b){ return a+b; } const sub = function(a,b){ return a-b; } const mul = function(a,b){ return a*b; } const di = function(a,b){ ...
  • commonjs模块化 首先写一个api,提供给外部调用 //commonjs let sum =(a,b)=> a+b; // 暴露接口 ...es6模块化 首先写一个api,提供给外部调用 //es6 export function sum(a,b){ return a+b; }
  • commonJS exports/module.exports:初始状态两者指向同一个空对象。 一般用module.exports导出,用require导入;(使用exports导出的,没有效果) es6 export default 导出的,导入可以不用加大括号,只能导出...
  • ES6 起,引入了一套新的 ES6 Module 规范,在语言标准的层面上实现了模块功能,而且实现得相当简单,有望成为浏览器服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好,我们平时在 Webpack 中...
  • CommonJS模块和ES6模块

    2022-02-10 17:46:53
    通用模块定义4.ES6模块4.1模块导出4.2模块导入 1.CommonJS模块 CommonJS规范概述了同步声明依赖的模块定义。这个模块主要用于在服务器端实现模块化代码组织,但也可用于定义在浏览器中使用的模块依赖。CommonJS模块...
  • ES6模块加载方案 CommonJS和AMD ES6和CommonJS
  • CommonJS和ES6模块区别
  • 浅谈CommonJs规范和Es6模块

    千次阅读 2022-03-20 22:13:22
    前言: 前端模块化一直被我们所提及,无论是前端框架应用还是Node.js,都离不开模块化,而现在最常用的就是CommonJS和ES6规范。 CommonJS (1)CommonJS规范是一种同步加载模块的方式,也就是说,只有当模块加载完成后...
  • 模块化详解
  • 咱们这次说一下ES6和CommonJS区别。 它们有两个重大差异: CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。 第一个差异: CommonJS...
  • 同步模块加载 ,Commonjs主要应用的环境是nodejs,也就是服务器端广泛使用的一种模块化机制,模块一般都存在于本地,所以不需要考虑网络加载因素,所以是 同步加载。CommonJS 模块语法不能在浏览器中直接运行。 ...
  • 2 webpack编译 如果想让index.js文件支持es6模块,需要经过webpack编译后再使用。来配置下webpack: const path = require('path') const config = { mode: 'development', entry: './src/index.js', output: { ...
  • 本篇文章是博主看阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版,看文章,加代码实践总结的,如果有错误或者歧义的地方希望大佬们指出,免得误导更多人!!!
  • CommonJS —— 第三方,基于node,浏览器端没有
  • commonjs是作用于服务端应用程序,让js程序具有模块化功能的一种语法规范,执行方式是同步且运行时加载。 (一)、module.exports 导出 定义一个匿名对象,将需要导出的成员赋值到这个匿名对象上,然后再赋值到module....
  • 一、差异 CommonJS 1、对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该模块输出...也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,603
精华内容 7,841
关键字:

commonjs和es6模块的区别