模块化Common.js与ES6

简介: 模块化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

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
2月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
2月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
2月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
3月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
53 3
|
23天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
19 3
|
2月前
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
1月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
29 4
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
24 1
|
18天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
36 0
|
1月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
18 1
下一篇
无影云桌面