module.exports在浏览器的问题

Question

function test() {
    document.getElementById('test').innerHTML--
}
module.exports = test

这样可以用标签引用啵

<script src="./assets/js/index.js"></script>

报错module is not defined

请问是什么问题

Answer 1

node.js的语法又不是js的语法
CommonJS规范 node.js

导出 module.exports、exports
导入 require
实现 node.js自带的模块加载机制

AMD规范 浏览器

导出 define();
导入 require(["module", "../file"], function(module, file) { /* ... */ });  
实现 require.js  

CMD 浏览器

define(function(require, exports, module) {   
var a = require('./a')   
a.doSomething();
// ... 
})
实现 SeaJS

ES6模块化 浏览器 or node

// in file test.js
export function sum(num1, num2) {
    return num1 + num2;
}
import { sum } from './test';

// in file test.js
export default function(){return 1}; 
import m from './test'

实现 ES6语法支持 或者 babel转为es5

Answer 2

module是ES6引入模块化的运用，但目前浏览器并不能直接识别，需要打包工具打成ES5才可以

Answer 3

现代浏览器已支持export,import,所以script标签内应该这样使用：

<script type="module">
    import test from './a.js'
    test();
</script>

a.js代码如下：

export default function() {
    console.log('1')
}

Answer 4

function test() {

document.getElementById('test').innerHTML--

}
module.exports = test
这样可以用标签引用啵

<script src="./assets/js/index.js"></script>
报错module is not defined