注意事项:
改模块代码不用重启服务器,修改config文件的时候需要重启服务器
nvm的安装路径和node的安装路径不能在同一路径下面
有乱码问题使用管理员权限进行使用use方法
下载安装node
使用命令进行安装
1.nvm list 查看已下载所有的node版本
2.nvm install 版本号 下载指定版本的node
3.nvm uninstall 版本号 卸载指定版本的node
4.nvm use 版本号 使用指定版本的node/更换指定版本
5.nvm version 查看nvm的版本
C:\Users\Administrator>nvm install 18.16.0
C:\Users\Administrator>nvm uninstall 18.16.0
C:\Users\Administrator>nvm use 14.15.3
C:\Users\Administrator>nvm list
C:\Users\Administrator>nvm version
package.json文件的作用和pom.xml一样
NPM
管理前端包的依赖
使用淘宝镜像
npm install -g cnpm --registry=https://registry.npmmirror.com
注意:
报错的话就更换node的版本再进行下载
使用命令创建json
cnpm innit
后面的设置默认就直接回车
安装依赖
有本地安装,全局安装
1.本地添加,一般都是使用本地
npm install jquery
只能在package.json文件这个包下进行添加
开发环境(默认)
开发时会用到语法检查,包大小分析
npm install -D xxx
生产环境
–production
注意:当需要下载已经配置好的依赖,直接使用使用 npm install命令进行添加依赖包
yarn包管理工具
1.并行安装:
2.离线模式:
3.版本锁定:
4.信息输出 :
模块化
传统的问题
请求过多:页面复杂度高
依赖模糊:依赖的文件多
命名空间污染:
两个核心
暴露:自己可以选择暴露哪些文件,外部文件可以选择性引入
封装引入:将复杂的文件封装成几个文件,和java文件相似
好处:
避免命名空间污染
代码复用性高
责任分离,按需加载
不关心模块之间依赖问题
增加代码的可维护性
commjs规范(模块化)
在服务器端，模块的加载是运⾏时同步加载的；在浏览器端，模块需要提前编译打包处理。只有在运行时才能确定
语法:使用关键字module.exports require
暴露模块
module.exports = value; //暴露部分
exports.xxx = value; //暴露全部
引入模块
let m1=require('./m1');//引入整个文件
ES6模块化
不需要在运行的时候才确定
导出(export)两种方式
export {name,age};//按需导出
export default {name,age,fun};//默认导出所有
导入(import)两种方式
后缀名可以不用写
import {name,age} from './m1.mjs';//按需导入
import xxx from './m1.mjs';//导入所有
五.Webpack(自动化,模块化,前端开发构建工具)
1.作用
是一个JavaScript应用程序静态模块打包工具,可以将多个文件打包到单个文件中,解决了项目模块化和代码复用问题
2.webpack初体验
2.1本地安装(必须安装)
，命令⾏中是没有 webpack 命令的，因此要使⽤的话，需要在 package.json ⽂件中加⼊ scripts 属性，并将其值设置为对象，在对象中添加 “build”: “webpack index.js -o dist/bundle.js” 属性
2.2全局安装(可选)
看自己是否需要在命令行使用webpack命令,不需要可以不用安装
2.3测试:
执行完打包,就可以打开浏览器
3.webpack.config.js
3.1通过配置文件打包
代码在课件中,复制即可
4.webpack- dev- server
以上的方式都是静态方式,每次发生变动,都要重新打包才有效果,现在借用一个插件(标题)来实现自动打包和部署,该插件会帮我们启动⼀个简易的 http 服务器，并且动态监听源⽂件的变动，每当⽂件发生变动以后，它会⾃动帮我们重新加载该⽂件，⼤⼤的提升了开发的效率。
1.安装插件 :(代码课件复制即可)
2.修改配置
里面属性的含义：
–open ⾃动打开浏览器
–port 服务监听的端⼝ 3000
–hot ⽂件变动后⾃动更新
3.启动:
上⾯配置修改完成后，再修改 index.html ⽂件中引⼊ bundle.js 的路径为 ./bundle.js 即
可，此时在命令⾏执⾏ yarn build 就会启动⼀个 http 服务器，并且会⾃动打开浏览器窗⼝。
然后可以通过修改 index.js ⽂件，⽐如将 red 修改为 gray ，会发现修改完成后，浏览器⾃动更
新为最新的代码。
5.html-webpack-plugin
**问题:**通过上⾯的配置，我们已经可以⽐较轻松的在 webpack 开发了，但是还存在⼀个⼩问题就是 index.html ⽂件中引⽤ bundle.js ⽂件是被我们写死的，如果哪天不叫这个名字，或者加⼊了其他依赖,无法进行使用
安装插件:(课件中复制即可)
6.css- loader
为了将 CSS 也当作是⼀个模块，当其它模块需要⽤到对应的 CSS 时，可以使⽤ impot/require 等
⽅式⽅便的导⼊，我们需要安装 style-loader 和 css-loader，并在 webpack.config.js 中添加这
些 loader
css-loader：将 index.css ⽂件解析为 webpack
能识别的模块，然后打包进 bundle.js ⾥
⾯，但是这样样式与 index.html 还没有关系，想要关联起来就得⽤到 style-loader 了。
style-loader：将打包到 bundle.js 中的样式绑定到 index.html 上，以 style 标签的形式写⼊进
去转换过程： index.css -> bundle.js -> style-loader ->
安装 css-loader 和 style-loader:课件有复制即可
7.ES6转ES5
问题:由于现在开发基本都是基于 ES6 语法进⾏的，但是市⾯上并不是所有浏览器都能够直接⽀持 ES6，因此我们可以使⽤ webpack 集成 babel 来进⾏版本的转换，在编译时⾃动将 ES6 转换为 ES5，也就可以兼容绝⼤部分浏览器了。
流程步骤课件有复制即可文章来源：https://www.toymoban.com/news/detail-518312.html
注意:exclude 表示排除掉 node_modules 下载的依赖项。这样可以加速编译效率，⽽且我们也只需要对我们的项⽬ src 中的源文件进行编译即可。新增 .babelrc 配置⽂件，并加⼊以下内容文章来源地址https://www.toymoban.com/news/detail-518312.html
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
bpack 集成 babel 来进⾏版本的转换，在编译时⾃动将 ES6 转换为 ES5，也就可以兼容绝⼤部分浏览器了。
流程步骤课件有复制即可
注意:exclude 表示排除掉 node_modules 下载的依赖项。这样可以加速编译效率，⽽且我们也只需要对我们的项⽬ src 中的源文件进行编译即可。新增 .babelrc 配置⽂件，并加⼊以下内容
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
到了这里，关于04_前端包管理工具&模块化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
