第十三周
Module 模块
初识
- 什么是模块，模块系统
- 防止不同作用域变量相互污染，一个一个的局部作用域的代码块
- 以前：IIFE，缺点：引入顺序需要注意，还是会有全局变量
- 模块系统解决的问题：
- 模块化代码
- 消除全局变量
- 管理加载顺序
- 第三方库：RequireJS seaJS
- 官方原生：ES Module
- 模块内部默认是严格模式
基本用法
-
注意：
- 模块必须在服务器环境才能生效，本地环境不行
- 用live server 就行了
- 后面ajax 也需要服务器的环境
- 打开文件，需要目录的环境才可以使用 live server
-
基本用法
-
// 导入 import Slider from './slider.js'; // 导出 export default BaseSlider; // 引入 <script src='./index.js' type='module'><script> -
只要加上 type='module' 就把文件变成了模块
-
两种导入导出
-
导入导出
- 一个模块没有导出，也可以将其导入，被导入的代码只会执行一遍，即使导入多次
-
export default —— import
- import 时可以随便起名字，注意语义
- 一个模块只能有一个 export default
- 基本所有数据结构都可以导出，包括简单数据类型
-
export —— import
-
基本用法
-
只能导出声明或语句
-
导入时不能随意命名
-
// 1 export const age = 18; // 2 export { age }; import { age } from 'index.js';
-
-
多个导出
- 和上面第二种方式一样，写到对象里
-
导入导出时起别名
-
export { fn as func, className, age}; import { func, age, className as Person } from 'index.js';
-
-
整体导入
-
export { fn as func, className, age}; import * as obj from 'index.js'; console,log(obj.func) -
注意！
- export 和 export default 可以一起用，后面这个注意只有一个就行了
- export default 导出的东西在 obj.default 上
-
-
同时导入
-
// 可以单独导入 default ，也可以放在一条语句上，注意不能同名，default 则可以随意取别名 import { func, age, className } from 'index.js'; import age2 from 'index.js'; import age2, { func, age, className } from 'index.js'; // 写在一条语句上时，必须先写 default 的导入
-
-
注意事项
-
模块顶层的this 指向
-
undefined 由此也可以看出不是全局作用域了
-
注意： 导入和引入是一样的，同样的效果，module 中引入了也是模块
-
if(typeof this !== 'undefined'){ throw new Error('请使用模块的方式加载')； }
-
-
import 和 import()
-
import 具有提升效果，会提升到整个模块的头部，率先执行
-
import 只能放在模块的顶层，不能放在代码中执行
-
// 注意！！这里是错误的 if(PC){ import 'pc.js'; }else if(Mobile){ import 'mobile.js'; } -
import() 就是用来解决这个问题的，返回 Promise 对象
-
if(PC){ import('pc.js').then().catch(); }else if(Mobile){ import('mobile.js'); } -
import() 只是一个提案，可能会有兼容性问题，但是和后面webpack 一起用就没事了
-
-
导入导出复合写法
-
export { age } from './module.js'; // 等价于 import { age } from './module.js'; export { age } from './module.js'; -
相当于一个中转站，但是这种写法的内容，无法在当前模块使用，并不推荐
-
Babel
Babel是什么
- https://www.babeljs.cn/
- Babel 是JavaScript 的编辑器，用来将ES6 代码，转换成ES6 之前的代码
- Babel 本身是不会转换ES6 的api 的，需要借助其他模块实现，一些关键字语法可以直接实现转换，api 需要再引入其他实现模块，这些模块是由ES6 之前版本语法实现的，对于模块的实现，Babel 也无能为力，需要借助Webpack 实现
Babel使用方式
-
使用前准备工作
-
什么是Node.js 和 npm
- Node.js 是个平台或者工具，对应浏览器
- 后端JavaScript = ECMAScript + IO + File + ...等服务器的操作
- npm：node 包管理工具
-
安装Node.js
-
初始化项目
- npm init
- 生成一个package.json ，这个文件的作用就是记录项目安装了哪些包
- node_modules 文件夹是安装的包的目录
- 使用package.json ：npm install，会自动安装package 里面记录的包
-
安装Babel 需要的包
-
npm install --save-dev @babel/core @babel/cli -
具体命令看官网，这里的 --save-dev 表示开发依赖，上线就看不到了
-
指定版本安装：
-
npm install --save-dev @babel/[email protected] @babel/[email protected]
-
-
-
使用
-
看文档的过程解释：
-
-
官网这里，表示添加的代码，在package 相应地方添加就可以了
-
前面是命令名，后面是执行的命令，src 是输入路径，也就是源路径，lib 是输出路径，名字都是可以改的
-
-d 是缩写命令， 全称： --out-dir
-
npm run build
-
但是这里直接run 出来的文件和源文件是完全一样的，因为没有配置Babel，接下来设置配置文件
-
Create .babelrc configuration file
-
先安装包：
-
npm install @babel/[email protected] --save-dev -
至此三个包：
-
@babel/preset-env ： 具体改怎么转换ES6 相关语法，预设环境配置
-
@babel/core ： 核心包，发布命令，具体还是其他包执行
-
@babel/cli ： 使用命令行工具需要的包
-
分多个包就是模块化开发的典型例子
-
有了@babel/preset-env 这个包，再在目录下新建 .babelrc 配置文件
-
-
{ "presets": ["@babel/preset-env"] } -
至此就是Babel 能够达到的最好的效果了，api 语法的转化以及模块的处理，后面和webpack 联手解决
-
Webpack
Webpack 是什么
-
认识
- 静态模块打包器
- 动态的东西没办法处理
-
初体验
-
初始化项目
- npm init
-
安装Webpack 需要的包
-
npm install --save-dev [email protected] [email protected]
-
-
配置Webpack
-
webpack.config.js 官网demo：
-
const path = require('path'); module.exports = { // mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, }; -
配置这里的源文件
-
-
打包并测试
-
在package.json 中添加命令
-
"webpack": "webpack --config webpack.config.js" -
不写 --config 默认也是这个文件
-
npm run webpack
-
-
核心概念
entry、output、loader、plugins
-
entry、output
-
单/多 入口文件，单/多 出口文件
-
const path = require('path'); module.exports = { mode: 'development', // entry: './src/index.js', entry: { main: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, }; -
[name].js 根据源文件名字
-
-
loader
-
官网：https://www.webpackjs.com/loaders/，这里是官方的，还有很多第三方loader 没有收录
-
webpack 本身是处理js 的，想要处理css /图片 等非js 文件的模块，就需要各种各样的loader ，有官方的有第三方的，非常多，当然了，一些 loader 也是可以处理js 文件的
-
webpack 更像只是一个打包的工具，而其他的功能，比如说编译，就要用到loader 了
-
接下来用babel-loader 举例子学习
-
首先，Babel 是Babel，webpack 是webpack；Babel-loader 可以使它们连接起来，可以通过Babel-loader 使用Babel 的编译功能，然后再由webpack 把编译好的东西打包好，而真正编译的不是Babel-loader 而是Babel
-
安装包：
-
npm install --save-dev [email protected] @babel/[email protected] @babel/[email protected] -
再在目录下新建 .babelrc 配置文件
-
{ "presets": ["@babel/preset-env"] } -
修改 webpack.config.js 文件，添加loader
-
const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] } }; -
但是这时还是那个问题，只转换了关键字语法，没转换 api 的语法，我们需要一个“ 垫片 ”解决这个问题：core-js
-
安装包：（Babel 官网查看其他详情）
-
npm install --save-dev [email protected] -
在需要转换的文件中添加：
-
import 'core-js/stable'
-
-
-
plugins
-
loader 被用于帮助webpack 处理各种模块，而插件则可以用于执行范围更广的任务
-
本节课选择HtmlWebpackPlugin 展开学习
-
作用：把loader 处理完的代码嵌入到html 中，并生成新的文件到项目目录中
-
安装包：
-
npm install --save-dev [email protected] -
配置webpack.config.js
-
单文件：
-
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { index:'./src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, plugins:[ new HtmlWebpackPlugin({ template: './index.html' }) ] }; -
多文件：
-
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { index:'./src/index.js', search:'./src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, plugins:[ new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', chunks: ['index'] }), new HtmlWebpackPlugin({ template: './search.html', filename: 'search.html', chunks: ['search'] }) ] }; -
chunks 不添加，会把所有产出的js 文件都添加上
-
HtmlWebpackPlugin 还有其他功能，详细见文档
-
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // mode: 'production', mode: 'development', entry: { index:'./src/index.js', search:'./src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, plugins:[ new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', chunks: ['index'], minify: { // 删除注释 removeComments: true, // 删除空格 collapseWhitespace: true, // 删除标签属性值的双引号 removeAttributeQuotes: true } }), new HtmlWebpackPlugin({ template: './search.html', filename: 'search.html', chunks: ['search'] }) ] };
使用webpack 处理其他模块
-
处理css 文件
-
loader 让webpack 可以在js 中引入css，认识css 文件
-
// js 中引入css 直接import import './index.css'; // 安装css-loader npm install --save-dev [email protected] -
这里loader 还不够，现在只是认识了css 文件，不会报错，但还没有生效，它不知道要以style 的方式还是link 的方式引入到html 中，如果是style 方式，则需要其他loader ，如果是link 方式，需要其他plugin ，然后再使用这个插件里的loader ，大概是这个意思，插件功能大于loader
-
// style loader： npm install --save-dev [email protected] // 多个loader 作用： // 注意是从右到左生效 module: { rules: [ { test: /\.css$/, // loader: 'css-loader', use: ['style-loader', 'css-loader'] } ] } -
// link 需要的plugin // 安装： npm install --save-dev [email protected] // 配置： const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { ... module: { rules: [ { test: /\.css$/, // loader: 'css-loader', // use: ['style-loader', 'css-loader'], use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins = [ new MiniCssExtractPlugin({ filename: 'css/[name].css' }) ] }
-
-
处理css 文件中的图片 file-loader
-
如果是外部资源，是不需要考虑webpack 的，只有本地的资源才需要被webpack 处理
-
就像不认识 .css 一样，也不认识 .png 因此需要一个合适的loader
-
// 安装 file-loader npm install --save-dev [email protected] // 配置 rules: [ { test: /\.(jpg|png|gif)$/, use: 'file-loader' // 这里 use 和 loader 都行 } ] -
复制资源到dist 目录下，并且改变了源码中资源的路径，但是目前这里路径改变的有问题，我们在设置css plugin 的时候，设置的路径是 'css/[name].css' 这里并不是dist 主路径，而资源打包默认放在 dist 路径下面，而不是css 路径下面，因此使用 css plugin 时添加一些参数：
-
rules: [ { test: /\.css$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader'] } ] -
// 自定义资源路径： rules: [ { test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { name: 'img/[name].[ext]' // 这里name 就是资源本身的名字不是前面entry 名字，ext 就是原后缀 } } } ]
-
-
处理html 中的图片 html-withimg-loader
-
css 中的图片在 entry 的js 中可以找到，但是html 只是作为模板加载，因此里面的内容其实也是默认不处理的，图片不会被复制到dist ，也不会正常显示
-
// 安装 npm install --save-dev [email protected] // 配置 rules: [ { test: /\.(htm|html)$/, loader: 'html-withimg-loader' } ] // 这一步的结果有问题： <img src={"default": "img/logo.png"} alt="" /> // 这里的结果和file-loader 相关，这两个loader 是一起干活的，其实还是file-loader 解析的，file-loader 默认就是ES6 模块的方式导出的，export default // 解决办法： // options 中 添加属性 esModule： false rules: [ { test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { name: 'img/[name].[ext]'， esModule： false } } } ]
-
-
处理js 中的图片 file-loader
-
js 中的图片也可以和css 一样引入，但是这里需要有个名字，方便后面使用
-
import img from './img/logo.png' console.log(img) // file-loader 先把图片复制到dist 目录中，再修改img 的指向
-
-
使用 url-loader 处理图片
-
实际项目中，我们可能会把一些小图片用编码的形式嵌入到html 或者css 中，这些图片编码已经变成了html 和css 文件的一部分，这样网页就不需要多次请求了，file-loader 的功能单一，无法处理，有了url-loader 就不需要配置file-loader 了，但是url-loader 底层还是用到了file-loader ，都需要安装
-
// 安装 npm install --save-dev [email protected] // 配置 rules: [ { test: /\.(jpg|png|gif)$/, use: { loader: 'url-loader', options: { name: 'img/[name].[ext]'， esModule： false， limit: 10000 // 小于10K的，转成64 位格式的，大于的还是使用file-loader } } } ] -
-
上面这一堆，就是图片base64 编码，把它放到src 上就可以使用，图片越大，转成的编码占的空间也大，js 文件也会越大，转成编码格式，就不会复制图片到dist 了
-
搭建开发环境
webpack-dev-server：保存自动打包，不会生成dist 目录，在内存中，会打开默认浏览器
npm install --save-dev [email protected]
// 命令
'script': {
"webpack": "webpack",
"dev": "webpack-dev-server --open chrome"
}