zoukankan      html  css  js  c++  java
  • require与import

     require 和 import,都是为了JS模块化使用。最近项目中,因为多人协同开发,出现了一个项目中同时使用了require 和 import 引入依赖的情况。正常情况下,一个项目中最好是对引入方式做一个规范。下面我们就来看一下require 和 import的区别:

    一.require
      require是Commonjs的规范,node应用是由模块组成的,遵从commonjs的规范。用法:

     a.js
    
    function test (args) {
    // body...
    console.log(args);    
    }
    
    module.exports = {
    test
    };
    b.js
    
    let { test } = require('./a.js');
    
    test('this is a test.');

        require的核心概念:在导出的文件中定义module.exports,导出的对象类型不予限定(可为任意类型)。在导入的文件中使用require()引入即可使用。本质上,是将要导出的对象,赋值给module这个对象的exports属性,在其他文件中通过require这个方法来访问exports这个属性。上面b.js中,require(./a.js) = exports 这个对象,然后使用es6取值方式从exports对象中取出test的值。

    二.import
    import是es6为js模块化提出的新的语法,import (导入)要与export(导出)结合使用。用法:

    a.js:
    
    export function test (args) {
    // body...
    console.log(args);    
    }
    
    // 默认导出模块,一个文件中只能定义一个
    export default function() {...};
    
    export const name = "lyn";
    b.js:
    
    // _代表引入的export default的内容
    import _, { test, name } from './a.js';
    
    test(`my name is ${name}`);

    三、commonjs模块与ES6模块的区别
        1.commonjs输出的,是一个值的拷贝,而es6输出的是值的引用;

        2.commonjs是运行时加载,es6是编译时输出接口;

    文章目录
    概念
    一、ES6模块化的使用
    1、es6中的export
    2、es6中的import
    二、CommonJs规范的使用
    1、CommonJs中的exports
    2、CommonJs中的require
    三、CommonJs规范与ES6中import的区别
    1、引入模块的不同点
    2、引入模块的性能不同点
    3、暴露模块的不同点
    四、在nodeJs中怎么使用
    概念
    CommonJs是一种模块化规范,在ES6之前的,用于服务器端nodeJs和浏览器端。
    
    ES6标准发布后,模块化标准是以export指令导出接口,以import引入模块。
    
    但是在node模块中,我们依旧很多地方采用的是CommonJS规范
    即:使用module.exports导出接口,使用require引入模块。
    
    这两种方式我们或多或少都有用过,只是不了解这是2种不同的规范
    
    一、ES6模块化的使用
    es6中模块化靠export { }暴露导出模块,靠import ... from '...'引入模块
    
    1、es6中的export
    模块js使用export命令输出变量
    
    注意:这里输出的必须是变量,而不能是值(包括方法)
    
    注意:export命令不需要=,只要后面跟一个变量即可
    
    正确示例:
    // 直接暴露
    export var test = 'Michael';
    
    // 设置变量暴露
    var test = 'Michael';
    export {
      test
    }
    错误示例:
    // 直接暴露
    export 1;    //报错
    // 设置变量暴露
    
    var test = 1;
    export test;    //报错
    
    以上错误的原因,是因为export命令后面不是变量而是一个值,即使是赋值给了test,它也是一个值(方法同理)。
    正确用法中是把值包在了对象里{ test }
    2、es6中的import
    目标文件,使用import ... form '...'引入模块(前提是暴露模块正确)
    
    import命令引入没什么坑,主要延伸是结合ES6的解构赋值
    
    普通引入示例
    import fs from 'fs'        //引入整个fs模块
    
    var test = fs.star(....)    //调用fs模块中的star方法
    
    解构引入示例
    import { stat,readFile } from 'fs'        //引入fs模块中的stat,readFile方法,其余不引入
    
    var test = star(....)    //调用fs模块中的star方法
    
    二、CommonJs规范的使用
    CommonJs规范靠exports.xx = xx或module.exports = { xx }暴露导出模块。
    靠var xx = require('...')或var { stat, exists, readFile } = require('fs');引入模块
    
    1、CommonJs中的exports
    注意:这里的exports不是一个命令
    注意:这里的exports是有s的,且后面需要使用=,这里我的理解,exports自身是变量,引入就是依靠这个变量进行的
    
    使用exports示例
    var test = 1;
    exports.test = test;
    
    使用module.exports示例
    var test = 1;
    module.exports = {
      test
    }
    
    2、CommonJs中的require
    导入也没什么坑,同样可以使用解构
    
    普通引入示例
    var fs = require('fs')        //引入整个fs模块
    
    var test = fs.star(....)    //调用fs模块中的star方法
    
    解构引入示例
    var { stat,readFile } = require('fs')        //引入fs模块中的stat,readFile方法,其余不引入
    
    var test = star(....)    //调用fs模块中的star方法
    
    三、CommonJs规范与ES6中import的区别
    1、引入模块的不同点
    require('xx')可以直接作为一个对象,也就是可以直接当成变量来使用,不赋值。如:require('xx').star(...)
    而es6的import ... form ...是固定写法,不能操作
    2、引入模块的性能不同点
    CommonJs规范的引入require('xx')是“运行时加载”
    
    而es6的import ... form ...是按需引入,编译过程按照import命令来选择编译
    
    3、暴露模块的不同点
    在上面使用介绍,暴露模块的区别已经很明显了:
    es6的export命令不用=暴露一个变量(一般为对象)
    CommonJs的exports.xx=xx,是依靠exports变量自身来暴露的
    四、在nodeJs中怎么使用
    我们都知道es6是绝对通用的规范,且会更新到es7、es8等。而既然es6有模块化的方法,那么CommonJs规范将逐步被替换。
    但是现在而言,import、export等很多es6命令,还需要依靠编译成es5来实现。
    比如在vue-cli当中,es6的使用就需要依赖webpack的babel进行编译成es5。
    所以在nodeJs中如果不引入babel或其他方法来编译es5的话,依旧需要老老实实使用CommonJs规范。
    ndoeJs使用es6import、export命令的解决方法,可以看阮一峰老师的ECMAScript6,.mjs后缀文件名
    本文参考阮一峰老师的ECMAScript6
    
    与一些关于js编译与运行的博客

    .

  • 相关阅读:
    sql DATEDIFF 函数
    电控宝 命令
    dart 函数练习
    json对象和json字符串有啥区别啊
    windows 下 node 入门
    windows 下Nginx 入门
    SQL十进制和十六进制相互转换
    Action向视图传值的6种方式(转)
    从匿名方法到 Lambda 表达式的推演过程
    vue 入门1 组件管理
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/12080258.html
Copyright © 2011-2022 走看看