ES6中import和CommonJS中require的区别

ES6中import和commonJS中require的区别：

1. import是ES6标准中的模块化解决方案（因为浏览器支持情况不同，项目中本质是使用node中的babel将es6转码为es5再执行，import会被转码为require）。

   require是node中遵循CommonJS规范的模块化解决方案。

2. ES6模块是编译时输出接口，CommonJS模块是运行时加载。

3. ES6模块是动态引用，即导入和导出的值都指向同一个内存地址，所以导入的值会随着导出值变化。

　CommonJs的模块是对象。导出时是指拷贝，就算导出的值变化了，导入的值也不会变化，如果想要更新值就要重新导入。

3. import语句导入同一个模块如果加载多次只执行一次，require语句导入次数和实际执行次数相同。

4. import必须用在当前模块的顶层，如果在局部作用域内，会报错，es6这样的设计可以提高编译器效率，但没法实现运行时加载。

   require可以用在代码的任何地方。

5. 前者是关键词，后者不是

6. require支持动态引入，也就是require(${path}/xx.js)，import目前不支持，但是已有提案

7. ES6模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中。const isNotModuleScript = this !== undefined。require的模块中this指向window,this === window.

 

import介绍：

静态的import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ，导入的模块都运行在严格模式下。在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。

import用法：

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

export 语句用于从模块中导出函数、对象或原始值。

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from …; // does not set the default export
export * as name1 from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

require介绍：

RequireJS是一个JavaScript文件和模块加载器，可视为模块管理工具。

require使用：

// index.html
     <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js" data-main="js/main"></script>

// main.js
/**
 * RequireJS全局配置文件
 */
requirejs.config({
    //设置项目路径，项目会以baseUrl作为相对路径去查找模块文件
    baseUrl:"./js",
    //预加载JS文件的配置项，默认可不用添加.js后缀
    paths:{
        //RequireJS默认假定所有的依赖资源都是JS脚本，因此无需再module ID上再加上js后缀。
        jquery:"https://cdn.bootcss.com/require.js/2.3.6/require.min.js",
        boostrap: "bootstrap"
    }
});

// 引用配置好的模块
requirejs(['jquery', 'bootstrap'],function($, undefined){

});

// 引用自定义模块
require(['js/test2.js'], function(math) {
         console.log(math);
       });

// test2.js 自定义模块
define(function() {
    var add = (x, y) => {
      return x + y;
    };
    return {
      add: add
    }
  });
// 如果有依赖
define(['jquery'], function($) {return {}});
// 自定义命名
define('math/add', ['jquery'], function($) {return {add: XXX}});