ES6 -- 总结 03 - 技术栈

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=="
    }
  }
}