2021-12-15 Node、NPM、Babel、Webpack学习

Node.js

运行在服务端的JavaScript 是一个基于Chrome JavaScript 运行时建立的一个平台，底层架构师Javascript 基于谷歌的V8引擎
运行:node hello.js

实现请求响应

操作mysql数据库

npm install mysql

完整的前端项目结构

Npm

1.npm -init 初始化
npm init -y 初始化并自动配置
2.安装第三方模块
npm install xxxx 或者npm I xxx模块名 @版本号
3.导入模块
const redis = require(“redi”);
4.运行 node xxxx.js 运行过程.js是可以省略的
5.npm模块复用
在项目下 npm install,或者package.json复制到项目目录下，
6.淘宝镜像安装
npm install -g cnpm --registry=hhtps://registry.npm.taobao.org
7.卸载模块
npm uninstall vue jquery

Babel

将Es6的代码转化为Es5的代码
1.安装
npm install -g babel-cli
2.使用
1.创建babel文件夹
2.初始化项目
npm init -y
3.创建文件src/example.js
创建一个.babelrc 定义转码的规则
{
“presets”:[“es2015”],
“plugins”:[]
}
4.安装转码器
npm install --save-dev babel-preset -es2015
5.执行 babel src -d dist

指定输出文件
babel src/example.js --out-file dist1/compiled.js
或者
babel src/example.js -o dist1/compiled.js
整个目录转码
mkdir dist2
babel src --out-dir dist2 或者babel src -d dist2

自定义脚本

改写package.json
执行脚本 npm run 脚本名

模块化

1.CommonJS规范
每个文件就是一个模块，有自己的作用域，在一个文件里面定义的变量、函数、类都是私有的，对其他文件不可见。
所有文件必须先导出了才能使用
导出

导入
require

Es6规范
默认不支持
写法1
导出export
export function getList(){

	}
	导入import
	import {方法名} from '文件位置'

写法2 常用
export default{
方法1(){
},
方法2(){
}
}
import 文件名 from 文件位置
使用 文件名.方法
若不支持 先babel降低版本，转码一下 然后运行

Webpack

前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
1.安装
npm install -g webpack webpack-cli
安装后查看版本后
webpack -v
webpack合并js
src里存放需要合并的两个js文件并导出
在入口文件main.js导入需要合并的文件
在根目录下定义一个webpack.config.js文件配置打包的规则
执行webpack 查看效果
打包后的文件存放在bundle.js

webpack-w 监听
使用

webpack合并css
webpack 本身只能处理JavaScript模块，如果要处理其他类型的文件，即需要使用loader进行转换
Loder可以理解为是模块和资源的转换器
css-loader是将css装载到Javascript style-loader 是让javascript认识css
安装
npm install --save-dev style-loader css-loader
修改webpack.config.js
编译运行
npm run dev