为什么要模块化开发
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