什么是模块化
传统开发模式的主要问题
- 命名冲突
- 文件依赖
模块化:就是将单独的功能封装到一个模块(文件)中,模块之间相互隔离,可以通过特定的接口公开内部成员,模块也可以依赖于其他模块
好处:方便代码重用,提升开发效率,并且方便后期维护
ES6模块化
主要使用场景是在Node
中
node之前的模块化规范主要是commonJs
,从13.2版本之后,开始支持ES6模块化
修改type
属性
首先创建a.js
var a = 10
var f1 = ()=>{
console.log(20)
}
export default{
a,
f1
}
创建index.js
import a from './a.js'
console.log(a)
使用命令npm init -y
创建package.json
文件,并创建type
值为moudle
输出:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5Koslqt-1615387076493)(D:\桌面\临时文件\MK图片\image-20210309022106106.png)]
注意:
- 引入开发者自定义模块需要加路径
- 模块要带后缀名
- 使用 export default 导出 ,import导入名称可任意
按需导入导出
使用export
直接放到要导出的变量或者函数的前面
export let a = 10
导入
import {a} from './a.js'
也可以为导入成员起别名
import {a as moduleA} from './a.js'
console.log(modeleA)
直接执行模块代码
模块中没有任何保留成员,导入此模块时直接执行代码即可
for(var i = 0;i<10;i++){
console.log(i)
}
import './a.js'
webpack
因为浏览器对ES6的高级语法的支持并不友好,所以需要工具为我们进行转换
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
安装与配置
-
初始化项目
npm init -y
-
在根目录下新建src目录作为存放模块的文件目录
-
src下新建
index.html
和index.js
-
安装
webpack
npm install webpack webpack-cli --save-dev
--save-dev
也可直接写作-D
,表示开发依赖,也就表示开发阶段需用用到这个包,项目上线后不需要 -
配置
webpack
在根目录下新建
webpack.config.js
module.exports = { mode:"develpoment" //开发模式 }
-
在
package.json
中的scripts
属性中配置启动命令"dev":"webpack"
-
打包
npm run dev
打包成功后会在根目录创建
dist
目录,并生成main.js
文件 -
运行
在
index.html
中引入main.js
,运行即可
打包文件和出口文件
入口文件
就是项目中被请求时,第一个被访问的文件
对于webpack来说,打包的入口文件是index.js,因为index.js中引入了其他程序需要的模块
出口文件
打包之后的文件以及目录名称
webpack有一些默认配置
- 入口文件:src/index.js
- 出口文件:/dist/main.js
重新配置入口与出口文件
在webpack.config.js
添加如下代码
const path=require('path')
module.exports={
mode:'development', // 开发模式
//入口文件
entry:path.resolve(__dirname,'./src/index.js'),
//出口文件
output:{
path:path.resolve(__dirname,'./dist'),
filename:"bundle.js"
}
}
运行 npm run dev
打包查看结果
注意:建议输出文件名称使用 bundle.js,而且注意修改 index.html 中的引入文件为 bundle.js
自动打包
不需要每次运行是都输入npm run dev
安装
npm i webpack-dev-server --save-dev
修改package.json
中的启动命令
"dev":webpack serve --open //open表示自动打开网页
运行
npm run dev
打包后,会在当前文件的内存中生成一个js
文件。我们只需要在地址栏中输入路径就可以访问
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9dA9agX-1615387076496)(D:\桌面\临时文件\MK图片\image-20210310214252470.png)]
生成预览页面
安装
npm i --save-dev html-webpack-plugin
在webpack.config
中编写如下代码
const HtmlWebpackPlugin = require('html-webpack-plugin')
cost htmlPlugin= new HtmlWebpackPlugin({
template:'./src/index.html',//拷贝的源文件
filename:'index.html'//拷贝目标文件
})
在plugins
中加入
plugins:[htmlPlugin]
运行后页面就可以正常访问了
加载器
webpack 默认只能打包 .js 模文件,其他静态文件,如 .css,图片等默认不能处理,如果不加载对应的加载器,则会报错
处理css文件
在index.js
中导入css问价
安装loder
npm install css-loader style-loder --save-dev
配置webpack.config.js
module:{
rules:[
{test:/\.css$/,use:['style-loder','css-loader']}
]
}
处理less
安装
npm install less-loader less -D
rules中添加规则
{test:/\.less$/,use:['style-loder','css-loader','less-loader']}
处理图片
安装
npm i file-loader url-loader -D
配置webpack.config.js
{
test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,
use: [{
loader: 'url-loader',
options: {
limit: 614400 // 代码中使用的图片为500k
}
}]
}
处理高级js语法
安装babel转换器相关包
npm install -D babel-loader @babel/core @babel/preset-env
配置webpack.config.js
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
安装babel 语法的相关插件
npm i -D @babel/plugin-proposal-class-properties
配置webpack.config.js
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
}
减小代码体积安装
npm i -D @babel/runtime @babel/plugin-transform-runtime
规则中的 plugins 中修改插件的配置
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}