当前位置：首页 > news >正文

ES6 -- 总结 03

news 来源：原创 2024/9/18 13:58:22

Es6的模块化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./module2.js" type="module"></script>
</body>
</html>

module1.js

let str = 'hello world'
let num = 999
export let fun  = ()=>{console.log('你好')return 'nihao'
}
//es6 模块化
// 导出
// export 在一个js中可以存在多个
export {str,num}
// export default 默认导出 在一个js中只能存在一个
export default{str,num:num   
}

module2.js

// as 起名别 按需引入的时候一般需要同名引入 export 暴漏的用import导入一般是同名导入import {}
import {str as str1,num,fun} from './module1.js'
import aa from './module1.js'
console.log(aa.str)
console.log(str1)
console.log(num)
console.log(fun())

node的基本知识

// npm node的包管理工具 你安装node的时候就内置了npm---软件包就是你用到第三方插件
// npm -v就能查看npm版本号
// node 可以让你用js写后台
// java php 
// node 里面可以写js代码呢？
// 你的浏览器为什么能解析js?
// 因为浏览器和node内置v8引擎
// npm init初始化项目 生成一个pageage.json文件
// npm install 可以简写为npm i
// npm i 下载插件之后会多出来package-lock.json和node_modules
// node_modules 这个文件夹就是你下载的插件源码所存放的目录
// package.json  scripts可执行的命令
// package.josn这个文件是干啥的？
// package.josn 项目的核心配置文件、记录你项目的依赖列表 版本信息
// dependencies 依赖 指的是生产环境的依赖--普通用户都可以看到的环境就是生产 
// --依赖就是你下载的插件
// devDependencies 开发环境的依赖 
// npm install swiper jquery 默认下载到生产环境
// npm i swiper --save 可以简写为-S
//  npm i jquery --save-dev 开发环境 简写为 -D
// 卸载依赖 npm uninstall jquery
// package-lock.json 记录你下载的插件版本信息 --更精确的记录版本信息以及源码地址
// npm i 插件名 下载的都是最新的
// 当你的项目没有node_modules的时候，你执行npm i 自动下载依赖
// 你在执行npm i 的时候 package-lock.json的优先级高于package.json
// 如果你存在package-lock.josn这个文件，你再去下依赖的时候，会根据package-lock.josn文件去下载他的优先级高于package.json
// 如何下载指定版本的jquery
// npm i jquery@1.11.0
// package.json这个文件不能进行删除 他是你项目的基础文件
// package-lock.json 这个文件是可以删除的但是不建议删除--当你下载依赖报错的时候删掉他之后再重新下载依赖
// package-lock.json 确保依赖的一致性
// node.js是遵从commonjs规范的
// commonjs规范规定：一个文件就是一个模块，每个模块都有独立的上下文
// commonjs规范的模块化使用modeule.exports和require

index.js

// node是遵从commonjs规范的
// 1. 模块化
// require 导入模块
// commonjs规范 导出需要用module.exports导入require导入
let $ = require('jquery')
let aa = require('./moudle')
console.log(aa)
console.log($)

moudle.js

const aaa = 'hello wrold'
const obj ={name:'小明',age:20,makeMoney(){console.log('xiaoming')}
}
module.exports = obj

package.json

// 在集成终端中打开 输入npm init初始化项目 生成一个pageage.json文件
{"name": "node","version": "1.0.0","description": "","main": "01-node的基本知识.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"jquery": "^3.7.1","swiper": "^11.1.10"}
}

package-lock.json

// 在集成终端中打开 输入 npm install swiper jquery 会自动生成package-lock.json和node_modules文件(里面有 swiper jquery 文件)
{"name": "node","version": "1.0.0","lockfileVersion": 2,"requires": true,"packages": {"": {"name": "node","version": "1.0.0","license": "ISC","dependencies": {"jquery": "^3.7.1","swiper": "^11.1.10"}},"node_modules/jquery": {"version": "3.7.1","resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz","integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="},"node_modules/swiper": {"version": "11.1.10","resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.10.tgz","integrity": "sha512-pAVM6vCb6bumj2B9aSh67l3wP1j5YR8dPQM1YhQKMpnBc33vs+RpyVz6NZYZl/ZopCBSYbbWK5nvESwbmU0QXQ==","funding": [{"type": "patreon","url": "https://www.patreon.com/swiperjs"},{"type": "open_collective","url": "http://opencollective.com/swiper"}],"engines": {"node": ">= 4.7.0"}}},"dependencies": {"jquery": {"version": "3.7.1","resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz","integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="},"swiper": {"version": "11.1.10","resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.10.tgz","integrity": "sha512-pAVM6vCb6bumj2B9aSh67l3wP1j5YR8dPQM1YhQKMpnBc33vs+RpyVz6NZYZl/ZopCBSYbbWK5nvESwbmU0QXQ=="}}
}