Es6的模块化
html
复制代码
<!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
javascript
复制代码
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
javascript
复制代码
// 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的基本知识
javascript
复制代码
// 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
javascript
复制代码
// node是遵从commonjs规范的
// 1. 模块化
// require 导入模块
// commonjs规范 导出需要用module.exports导入require导入
let $ = require('jquery')
let aa = require('./moudle')
console.log(aa)
console.log($)
moudle.js
javascript
复制代码
const aaa = 'hello wrold'
const obj ={
name:'小明',
age:20,
makeMoney(){
console.log('xiaoming')
}
}
module.exports = obj
package.json
javascript
复制代码
// 在集成终端中打开 输入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
javascript
复制代码
// 在集成终端中打开 输入 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=="
}
}
}