模块化Common.js与ES6

为什么要模块化开发

1. 依赖关系（a文件依赖b文件中的方法，b文件必须在a文件之前引入）
2. 命名问题 (多个文件变量名，方法名相同会出现覆盖)
3. 代码组织(后期不好维护)

模块化规范有

1. Common.js 规范  node，webpack使用的Common.js规范

Common.js 的导出与引入

结论：
1.module.exports = { }暴露出去。require 引入。
如果没有使用 module.exports将其暴露，将默认得到一个空对象。

2.同一个文件只能只用一个 module.exports，如果多个，将会出现覆盖。
后面的覆盖其前面的。

3.如果需要导出多个，可以放置在一个对象中 module.exports = { a:'',b:''}

4.暴露多个对象，还可以使用下面这一种
exports.say = say
exports.hello = hello
调用的方式都是相同的。

5.无论是使用 module.exports还是exports.xxx 进行导出。
我可以都是可以进行解构。因为导出的是一个对象。
let  { say, hello}= require('./a')

没有导出默认得到一个空对象

a.js
function say(){
  console.log('我是a.js')
}

demo.js
let a= require('./a')
console.log(a)
因为没有暴露出去，所以得到的是一个空对象

module.exports 暴露多个方法

function say(){
  console.log('我是a.js')
}
function hello(){
  console.log('hello呀')
}

module.exports ={
  say,
  hello
}

node中使用ES6模块规范

结论:
1. export default 暴露出去 export default obj
通过 import A from "./a" 引入

2.如果在node中使用ES6模块的方式导出，将会报错。
Cannot use import statement outside a module
不能在模块外使用import语句。

解决办法：在根目录下创建一个package.json文件。
然后去声明一个模块类型。
可以使用命令:npm init -y
package.json文件
{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "demo.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
特别说明的是：
"type": "module", 表示的是模块类型。默认是commonjs.
我们因为中node使用了es6模块的方式，隐藏要使用 module

"main": "demo.js",表示的是默认执行哪一个文件

如何还报错：Did you mean to import ../xxx.js?
是因为你引入的路径不是全路径，省略了文件的后缀名。
更改为引入文件的全路径(添加上文件后缀名就行)

进一步思考：
因为你在项目的根目录下声明了模块的类型是 module。
那么你就不能够使用 Common.js规范。使用的话会报错
因此：建议只用一种类型。通常在node中，我们使用的是 Common.js