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')

}