前端模块化
为什么要使用模块化？
- 解决代码命名重复的问题
- 代码复用
模块化的核心：导入和导出
ES5中模块化的实现
- 导出
// 在index.js文件中
var moduleA = (function(){
var bookList = ["Python快速编程入门","概率论与数理统计","数据结构与算法"]
function sum(n1,n2){
return n1 + n2
}
// ...
var obj = {
bookList,
sum
}
return obj
})()
- 导入
// 在另一份js文件中
;(function(){
console.log(moduleA.bookList)
console.log(moduleA.sum(30,50))
})()
ES5实现模块化
常见的模块化规范
CommonJS
注意：
module.exports 和 require 需要在node.js环境下才能发挥作用
- 导出
// 在index.js文件中
var bookList = ["Python快速编程入门","概率论与数理统计","数据结构与算法"]
function sum(n1,n2){
return n1 + n2
}
// ...
module.exports = {
bookList,
sum
}
- 导入
// 在另一份js文件中
var {bookList,sum} = require('./index.js')
console.log(bookList)
console.log(sum(30,50))
ES6中的Modules
<!-- 加入 type="module" 表示将js文件作为一个独立的模块使用,有自己单独作用域 -->
<script src="index.js" type="module"></script>
<script src="index2.js" type="module"></script>
- 导出
// 在index.js文件中
let bookList = ["Python快速编程入门","概率论与数理统计","数据结构与算法"]
const sum = (n1,n2) =>{
return n1 + n2
}
// ...
export{
bookList,
sum
}
// 第二种导出方式, export default 在同一个 js 文件只能用一次
// export default function(){
// // ...
// }
// 其它导出
export let name = "hhh"
- 导入
// 在另一份js文件中
import {bookList,sum,name} from './index.js'
// 第二种导入可以自己命名变量
// import myFun from './index.js'
// 第三种导入方式: 将index.js中所有的导出数据都放在myObj中
// myObj是一个对象,使用: myObj.sum(10,20)
// import * as myObj from './index.js'
console.log(bookList)
console.log(sum(30,50))
ES6中的Modules
AMD
CMD
Webpack
什么是webpack？
从本质上来讲，webpack 是一个现代的 JavaScript 应用的静态模块打包工具
webpack 和 grunt/gulp 的不同
grunt/gulp 强调的是前端流程的自动化，模块化不是它的核心
webpack 强调模块化开发管理，而文件的压缩合并、预处理等功能只是附带的
webpack的安装
- webpack 依赖于node环境，所以必须先安装node.js,详细安装步骤点击这里，而 Node.js 自带了软件包管理工具 npm
- 注意 : node的版本必须大于 8.9
1.安装完node.js后，查看node版本
node版本
2.全局安装指定版本的 webpack
webpack安装
3.查看 webpack 的版本
查看 webpack 的版本
webpack的起步
-
根据以下的文件目录新建工作目录
新建目录
-
在编译器中编写模块化依赖代码，这里使用 CommonJS 模块化规范
在mathUtils.js文件中，导出函数
function add(num1,num2){
return num1 + num2
}
module.exports = {
add
}
在main.js中，导入函数
const {add,mul} = require('./mathUtils.js')
console.log(add(20,30))
- 打开webpack的起步终端，输入以下代码
webpack ./src/main.js ./dist/bundle.js
-
看到以下情况，则为打包成功
打包成功
- 在index.html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 这里只需引用 bundle.js 文件即可 -->
<script src="./dist/bundle.js"></script>
</body>
</html>
-
运行程序，出现结果
运行程序
总结：
1.创建工作目录，打开对应根文件夹的终端
2.书写模块化的代码，其中 main.js 文件为项目入口文件
3.输入 webpack 入口文件目录 打包到指定目录(出口)
4.在 index.html 文件只需引用 指定目录文件 即可，生成的指定目录文件中，包含该入口函数中的各种依赖关系
webpack的相关配置
-
生成package.json配置文件
1.打开对应根文件夹的终端
2.输入npm init，回车
3.给项目起一个别名，最好全部用小写，然后全部回车
4.自动生成 package.json 文件，里面包含刚刚的配置
5.输入npm install，回车,生成package-lock.json文件
6.package.json：通过npm init 生成，npm包管理的文件 -
配置webpack.config.js文件
1.新建 webpack.config.js 文件，与 index.html 文件为兄弟关系
2.写入代码
// path为一个模块,依赖于 node 的包,上一步已经生成
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
// __dirname:全局变量,保存当前文件(webpack.config.js)所在的路径
// 拼接上 dist
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
3.在终端输入 webpack，回车，看到下面情况，打包成功
打包成功
-
更改 package.json 文件
1.用 npm run build 指令映射为 webpack 指令
更改配置
2.在终端输入 npm run build，回车，看到下面情况，打包成功
打包成功
安装本地的webpack
由于运行 npm run build 指令会优先使用本地的webpack，本地没有安装，就会使用全局的webpack，这就造成从别人那里clone的项目不能运行(别人项目运行时使用的webpack版本和自己电脑全局的webpack版本不一致)，所以本地也需要安装webpack
1.终端输入 npm install webpack@3.6.0 --save-dev
3.6.0：webpack的版本号
--save-dev：由于项目在浏览器运行时不再使用webpack，--save-dev 为开发时依赖
--save：项目在浏览器运行时需要使用webpack，--save 为运行时依赖
2.安装成功后，目录中多了node_modules文件夹，在终端运行 npm run build
打包成功
3.注意：只要是在终端输入的命令(如 webpack)，都是去使用全局的，而我们在 package.json 中写入了脚本，在本目录的终端输入(npm run build)优先使用局部的(本地的)
安装loader
什么是loader
在我们开发过程中，不仅仅会使用js代码，还可能使用ES6、less、scss .vue文件等等，而 loader 能将我们这些浏览器不识别的代码或文件转化成浏览器能识别的代码或文件
loader 的安装步骤
- 通过npm 安装需要使用的 loader
- 在 webpack.config.js 中的 module 关键字下进行配置
webpack中使用css文件
-
文件目录
目录
在index.css中
div{
width: 100px;
height: 100px;
background-color: #f00;
}
在main.js中添加css文件依赖
// 对 css 文件形成依赖
require('./css/index.css')
-
打开webpack中文文档，点击 loaders
LOADERS
css-loader
-
根据步骤安装 css-loader
npm install --save-dev css-loader
module: {
rules: [
{
test: /\.css$/,
// loader 从右向左读取
// css-loader 只负责加载
// style-loader 将样式添加到DOM中
use: [ 'style-loader', 'css-loader' ]
}
]
}
- 还需安装 style-loader ，点击这里，此时 style-loader 不需要配置，上一步已配置
-
重新打包，出现结果
结果
webpack中使用图片
一. 安装url-loader
npm install --save-dev url-loader
二. 修改webpack.config.js配置文件
{
text:/\.(png|jpg|gif|jpeg)$/,
use:[
{
loader:'url-loader',
options:{
limit:8192 //8kb
}
}
]
}
如果图片小于limit值（8kb），图片是通过base64编码展示
如果图片大于limit值（8kb），则会报错，需要安装file-loader，才能正确运行
npm install --save-dev file-loader
再次打包，发现dist文件夹下多出一个图片文件
修改文件名操作
options:{
limit:8192,
name:'img/[name].[hash:8].[ext]'
}
设置输出路径
output:{
path:path.resolve(__dirname, 'dist'), //path通常是一个绝对路径
filename:'bundle.js',
publicPath:'dist/'
},
webpack中vue开发
安装vue
npm install vue --save
.vue文件的解析
npm install vue-loader vue-template-compiler --save-dev
{
test:/\.vue$/,
user:['vue-loader]
}
搭建本地服务器
npm install --save-dev webpack-dev-server@2.9.1
webpack.config.js文件配置修改如下：
devServer:{
contentBase: './dist',
inline: true
}
- contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
- port：端口号
- inline：页面实时刷新
- historyApiFallback：在SPA页面中，依赖HTML5的history模式
配置一个scripts：
"dev": "webpack-dev-server --open"
END
网友评论