前端学习杂记

最新推荐文章于 2025-05-16 17:41:33 发布

图南zzz

最新推荐文章于 2025-05-16 17:41:33 发布

阅读量173

点赞数 1

文章标签： node.js javascript npm es6 babel

本文链接：https://blog.youkuaiyun.com/qq_51256566/article/details/120625052

版权

大前端串讲

一、Node.js

Node.js就是运行在服务端的JavaScript
Node.js是一个时间驱动I/O服务器JavaScript环境，基于Google的V8引擎，V8引擎执行JavaScript的速度非常快，性能非常好

Node.js快速入门

浏览器的内核包括两个部分核心

DOM渲染引擎
JavaScript解析器（js引擎）
js运行在浏览器内核中的js引擎内部

而Node.js是脱离浏览器环境运行的JavaScript程序，基于V8引擎

二、ES6入门

简介

ES6全称为ECMAScript，是JavaScript的规格，而JS是ES6的实现。

基本语法：

ES标准中不包含DOM和BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

let与var的区别

let声明的变量由局部作用域，var生命的变量没有局部作用域
var可多次生命（类似覆盖），let只能声明一次
var会变量提升，let不会

const声明变量

const用于生命常量，并且在生命的时候必须初始化，否则会报错，在初始化后不可在修改它的值

解构赋值

//数组解构
let [a,b,c] = [1,2,3]

console.log(x,y,z)

//对象结构
let { name , height } = user
console.log(name,age)

模板字符串

let name = 'zhangsan'
let info = 'Name is ${name}'

声明对象简写

属性值与属性名相同的时候，只写属性名就行

定义方法简写

const person = {
	HelloWorld(){
		....
	}
}

对象拓展运算符

//浅拷贝
let p = person
//深拷贝
let p2 = {...person}

箭头函数

var f = (a,b) => a+b
或
var f2 = (a,b) =>{
	return a+b
}

三、NPM包管理器

简介

NPM即Node Package Manager，是Node.js包管理工具，相当于前端的Maven。

使用npm管理项目

npm init ---->输入相关信息生成文件

npm init -y ------>直接生成json

修改npm镜像

npm config set registry https://registry.npm.taobao.org

npm config list //查看信息

npm install

npm install jquery

npm install -D eslint

#全局安装
npm install -g webpack
npm install

其他命令

#更新包
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

四、Babel

简介

ES6的某些高级语法在浏览器环境甚至是node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转化为ES5代码。

安装

npm install -g babel-cli

Babel的使用

npm init -y

自定义脚本

1.改写package.json

{
	"scripts":{
		"build":"babel src\\example.js -o dist\\compiled.js"
	}
}

2.转码的时候，执行下面的命令

mkdir dist
npm run build

五、模块化

模块化规范

CommonJS模块化规范
ES6模块化规范

CommonJS规范

创建"module"文件夹

创建 mokuai-common-js/四则运算.js

const sum = function(a,b){
    return a + b
}
const subtract = (a,b) => a-b
.....

导出模块中的成员

//导出成员：
module.exports={
	sum,
	subtract,
	...
}

创建 mokuai-common-js/引入模块.js
```
const m = require('./四则运算.js')
```
运行程序
```
node 引入模块.js
```

ES6模块化规范

ES6使用export和import来导出、导入模板

创建mokuai-es6文件夹

创建src/userApi.js文件，导出模块

export function getList(){
	console.log('获取数据列表')
}
export function save(){
	console.log('保存数据')
}

创建src/userComponent.js文件，导入模块

import{getList,save} from './userAPI.js'
getList()
save()

初始化项目

npm init -y

配置.babelrc

{
	"persets":["es2015"],
	"plugins":[]
}

安装转码器，在项目中安装

npm install --save-dev babel-preset-se2015

定义运行脚本，packag.json中增加"build"

{
	"scripts":{
		"build":"babel src -d dist"
	}
}

执行命令转码

npm run build
运行程序

node dist/userComponent.js

ES6模块化写法2

创建src/userApi2.js,导出模块

export default{
	getList(){
		console.log('获取数据列表2')
	},
	save(){
		console.log('保存数据')
	}
}

创建src/userComponent2.js，导入模块

import user from "./userApi2.js"
user.getList()
user.save()

执行命令转码执行程序

npm run build
运行程序

node dist/userComponent2.js

六、Webpack

什么是webpack

Webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

将静态资源js.css.less转换成一个静态文件，减少页面的请求

WebPack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

初始化项目

创建webpack文件夹

npm init -y
创建src文件夹

src下创建common.js

export.info = function(str){
	document.write(str);
}

src下创建utils.js
```
exports.add = (a,b) => a+b;
```

src下创建main.js

const common = require('./common');
const utils = require('./utils');

common.info('Hello world!' + utils.add(100,200));

JS打包

webpack目录下创建配置文件webpack.config.js
```
const path = require("path");	//Node.js内置模块
moudule.exports = {
    entry:'./src/main.js'
    output:{
		path:path.resolve(_dirname,'./dist'),  //输出路径，_dirname:当前文件所在路径
        filename:'bundle.js' //输出文件
	}
}
```
以上配置的意思是：读取当前项目目录下src文件中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

命令行执行编译命令

webpack --mode = development
#执行后查看bundle.js里面包含了上面两个js文件的内容并进行了代码压缩

也可以配置项目的npm运行命令，修改packa.json文件

"scripts":{
	"dev":"webpack --mode=development"
}

运行npm命令执行打包

npm run dev

webpack目录下创建index.html，引用bundle.js