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时需要启动本地服务。