commonJs和es6 modules的对比和使用

240 阅读1分钟

1、commonJs是nodejs,也是服务端广泛应用的模块化工具,具体写法如下:

a.js var x = 5; var addX = function (value) { return value + x; };

b.js var app = require('./index.js'); console.log(app.addX(3));

这种使用方式,使用node b.js命令可以直接运行,如果在html中引入b.js的话需要同时引入require.js,否则浏览器里会报错不识别require 方法。

2、es6 modules,是es6新增的Modules对象,内置的模块化语法,不需要额外引入requirejs,具体写法如下:

a.js export default function add(value) { return value; }

b.js import app from 'index.js'; console.log(app(2));

此时不能在终端执行node b.js 命令,因为node不能识别es6 Modules,如果在html文件中引入b.js的时候,<scrip>标签中的type应该设置为modules,而不是text/javascript

<script type="module" src="b.js"></script>

此时如果用浏览器直接打开html文件的话,浏览器会报错,错误如下,跨域问题,

Access to script at 'file:///D:/commonTest/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

原因是浏览器通过标签引入js,加载js文件时使用file协议,该协议会导致跨域,而使用http,https等协议就不会出现这个问题。所以在使用import,export时需要启动本地服务。