模块化概述
- 传统开发模式的主要问题
- 命名冲突
- 文件依赖
- 模块化就是把单独的一个功能封装到一个模块中, 模块之前相互隔离, 但是可以通过特定的接口公开内部成员, 也可以依赖别的模块
- 方便代码重用, 提高开发效率, 方便后期维护
浏览器模块化规范
- AMD
- require.js
- CMD
- sea.js
服务器端模块化规范
- CommonJS
- 模块分为单文件模块和包
- 模块成员导出
module.exports和exports- 模块成员导入
require()- ES6 模块化
- 是浏览器与服务器通用的模块化开发规范
- 每个js都是一个独立的模块
- 导入模块成员
import- 导出模块成员
export
Node中通过babel体验模块化
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel-node
npm install --save @babel/polyfill
// 项目根目录创建 babel.config.js 添加 规则
const presets = [
["@babel/env", {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}]
]
module.exports = { presets }
npx babel-node index.js // 执行代码
默认导出 默认导入
默认导出
export default只能使用一次默认导入
import from
// m1.js
// 定义私有成员
let a = 10
let b = 20
// 外界访问不到变量d, 因为没有暴露出去
let d = 30
function show(){
console.log(11)
}
// 将本模块的私有成员暴露出去
export default {
a,
b,
show
}
// index.js
import m1 from './m1'
console.log(m1)
按需导出 按需导入
// m1.js
// 按需导出可以使用多次
export let s1 = 10
export let s2 = 20
export function say() {
console.log('aaa')
}
// index.js
import {s1, s2 as s3, say} from './m1'
直接导入并执行模块代码
// m2.js
for (var i = 0; i < 3; i++) {
console.log(i)
}
import './m2'
webpack 概述
webpack 是一个流行的前端构建工具 (打包工具) 提供了友好的模块化支持 , 以及代码压缩混淆, 处理js兼容性问题 , 性能优化等强大的功能
在项目安装和配置 webpack
npm install webpack webpack-cli -D
// 创建 webpack.config.js
module.exports = {
// 编译模式
mode: 'development' // development production
}
// package.json 创建命令
"dev": "webpack"
npm run dev
配置打包的入口与出口
webpack 的 4.x 中默认约定
- 打包的入口文件为 src -- index.js
- 打包的输出文件为 dist -- main.js
// 如果要修改 可以再 webpack.config.js
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/index.js'), // 打包入口文件路径
output: {
path: path.join(__dirname, './dist'), // 输出文件存放路径
filename: 'bundle.js' // 输出文件名称
}
}
配置webpack 自动打包
npm install webpack-dev-server -D
- 修改 package.json script 中的 dev 为
webpack-dev-server - 将index.html 中的引用 修改为
/bundle.js
注意 : webpack-dev-server 打包生成的输出文件, 默认是放到根目录下的 , 而且是虚拟的 看不见的
配置 html-webpack-plugin 生成预览页面
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlPlugin = new HtmlWebpackPlugin({ // 创建插件实例对象
template: './src/index.html', // 执行要用到的模板文件
filename: 'index.html' // 指定生成的文件的名称, 改文件存在于内存中, 在目录中不显示
})
module.exports = {
plugins: [HtmlPlugin] // plugins 数组时 webpack 打包期间会用到的一些插件列表
}
自动打包相关参数
--open 打包完成后自动打开浏览器页面
--host 配置IP地址
--port 配置端口
webpack-dev-server --open --host 127.0.0.1 --port 8888