一、nodejs
1、Node.js是什么
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
2、安装
1、下载
官网:https://nodejs.org/en/
中文网:http://nodejs.cn/
2、安装
一路下一步。
3、查看版本
node -v
3、快速入门
1)使用nodejs执行JavaScript代码
创建 01-控制台程序.js
console.log('Hello Node.js')
cmd中运行查看
清屏代码:cls
2)在vscode工具中打开cmd窗口,进行js代码执行
3)遇到的问题
4、服务器端应用开发(了解)
创建 02-server-app.js
const http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello Server');
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');
运行服务器程序
node 02-server-app.js
服务器启动成功后,在浏览器中输入:http://localhost:8888/ 查看webserver成功运行,并输出html页面。
停止服务:ctrl + c
二、npm
1、npm是什么
npm是Node.js包管理工具,在后端开发中,使用过maven,maven构建项目,管理jar依赖,联网下载依赖。npm类似于maven,用在前端中,管理前端js依赖,联网下载js依赖,比如jquery。
2、npm工具的安装位置
我们通过npm 可以很方便地下载js库,管理前端工程。
Node.js 默认安装的npm包和工具的位置:Node.js目录\node_modules
npm -v
3、使用npm管理项目
1、创建文件夹npm
2、项目初始化
npm init
npm init -y
3、修改npm镜像
NPM官方的管理的包都是从 http://npmjs.com下载的,但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整 npmjs.com 镜像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。
设置镜像地址:
npm config set registry https://registry.npm.taobao.org
npm config list
3、npm install命令的使用
npm install jquery
npm install
npm install jquery@2.1.x
npm install --save-dev eslint
npm install -D eslint
npm install -g webpack
4、其它命令
npm update 包名
npm update -g 包名
npm uninstall 包名
npm uninstall -g 包名
三、babel
1、babel是什么
babel是转换器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。
因为写的代码es6代码,但是ES6代码浏览器兼容性很差,所以使用es5代码浏览器兼容性很好。
2、安装
Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:
npm install --global babel-cli
babel --version
babel : 无法加载文件 D:\studysoft\nodejs\babel.ps1,因为在此系统上禁止运行脚本。有关详细信息,
请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
看详细操作:https://blog.csdn.net/weixin_45606067/article/details/108904162
3、Babel的使用
1、初始化项目,并安装babel工具
2、创建js文件,编写es6代码
let input = [1, 2, 3]
input = input.map(item => item + 1)
console.log(input)
3、配置.babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件。
presets字段设定转码规则,将es2015规则加入 .babelrc
{
"presets": ["es2015"],
"plugins": []
}
4、安装转码器
npm install --save-dev babel-preset-es2015
5、转码
根据文件转码
mkdir dist
babel es6/01.js --out-file dist/001.js
babel es6/01.js -o dist/001.js
根据文件夹转码
mkdir dist
babel es6 --out-dir dist
babel es6 -d dist
四、模块化
1、模块化是什么
开发后端接口的时候,开发controller service mapper,controller注入service,service注入mapper,在后端中,类与类之间调用称为后端模块化操作。
前端模块化,在前端中,js与js之间调用成为前端模块化操作。
2、es5实现模块化操作
1、创建js文件
2、编写js代码
01.js代码
const sum = function(a,b){
return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
return parseInt(a) - parseInt(b)
}
module.exports = {
sum,
subtract,
}
02.js代码
const m = require('./01.js')
console.log(m)
const result1 = m.sum(1, 2)
const result2 = m.subtract(10, 3)
console.log(result1, result2)
3、测试
3、es6实现模块化操作
注意:如果使用es6写法实现模块化操作,在nodejs环境中不能直接运行的,需要使用babel把es6转换es5代码,才可以在nodejs进行运行
第一种写法
1、创建js文件
2、编写js代码
01.js代码
export function getList() {
console.log('getList....')
}
export function save() {
console.log('save.....')
}
02.js代码
import { getList, save } from "./01.js"
getList()
save()
执行:node 02.js
第二种写法
01.js代码
export default {
getList() {
console.log('getList....')
},
update() {
console.log('update....')
}
}
02.js代码
import m from "./01.js"
m.getList()
m.save()
执行:node 02.js
五、webpack
1、webpack是什么
webpack是一个前端资源加载/打包工具。他可以把多个资源文件打包成一个文件。
2、webpack安装
全局安装
npm install -g webpack webpack-cli
安装后查看版本号
webpack -v
3、初始化项目
1、创建webpack文件夹,初始化,并安装webpack
npm init -y
2、创建src文件夹
3、src下创建common.js
exports.info = function (str) {
document.write(str);
}
4、src下创建utils.js
exports.add = function (a, b) {
return a + b;
}
5、src下创建main.js
const common = require('./common.js');
const utils = require('./utils.js');
common.info('Hello world!' + utils.add(100, 200));
4、JS打包
1、创建webpack配置文件,配置打包信息webpack.config.js
const path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
2、命令行执行编译命令
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
3、webpack目录下创建index.html
引用bundle.js
<body>
<script src="dist/bundle.js"></script>
</body>
4、浏览器中查看index.html
5、CSS打包
1、安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader
2、修改webpack.config.js
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
3、在src文件夹创建style.css
body{
background:pink;
}
4、修改main.js
在第一行引入style.css
require('./style.css');
5、浏览器中查看index.html
删除bundle.js文件重新生成。看看背景是不是变成粉色了。
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)