极速入门"/>
Node+Npm+WebPack极速入门
文章目录
- Node.js
- Node.js概述
- 安装
- 极速入门
- 变量的定义与使用
- 函数的定义和使用
- 使用模块
- 创建Http服务
- 接收url中的参数
- 资源管理器Npm
- Npm概述
- 极速入门
- 创建工程
- js库的安装和卸载(本地安装和卸载)
- js库的安装和卸载(全局安装和卸载)
- 修改镜像源
- WebPack
- WebPack概述
- 安装
- 极速入门
- 工程结构
- css打包
Node.js
Node.js概述
简单的来说,Node.js就是基于JavaScript语言和V8引擎的开源Web服务器项目
简单插播一下V8引擎,非常强悍的JavaScript引擎,可以使js应用在各个领域,如Web、App、桌面端、服务端及IOT
V8主要有着非常重要的四个模块(Parser[负责将js源码转换为Abstract Syntax Tree(AST)]、Ignition[解释器、负责将AST转换为ByteCode,解释执行ByteCode,同时手机TurboFan优化编译所需的信息]、TurboFan[编译器,利用Ignition收集的类型信息,将ByteCode转换为优化的汇编代码、Orinoco[垃圾回收模块,将程序不再需要的内存空间回收])
再简单一点说,Node.js就是运行在服务端上的JavaScript
Node.js是一个事件驱动I/O服务端JavaScript环境。
安装
- 首先,cmd命令行检查本地是否安装了node.js
C:\Users\alien>node -v
v10.17.0
- 如果未安装去Node官网下载
极速入门
开发工具:WebStorm2020.1版本
变量的定义与使用
和js代码一致
运行
函数的定义和使用
使用模块
- Node.js引入了模块的思想,每个文件就是一个模块,有自己的作用域,有点类似Java中的类,在一个文件里面定义的变量、函数、类都是私有的,对其他文件均不可见
- 每个模块内部,module变量代表当前模块,exports属性是模块对外的接口,加载某个模块,其实是加载该模块的module.exports属性
运行
创建Http服务
http为node内置的web模块
浏览器访问localhost:8000
接收url中的参数
控制台命令执行代码后,浏览器访问http://localhost:8000/?username=ss&id=1&age=18
资源管理器Npm
Npm概述
- Npm全称Node Package Manager,是Node包管理和分发工具
- 可以将Npm理解为前端的Maven
- Npm可以方便地下载js库,从而管理前端工程
- 目前,Node.js已经集成了Npm工具,可通过npm -v 命令查看
极速入门
创建工程
- 创建一个名为Npm的文件夹,使用WebStorm打开
- Terminal中使用命令对工程进行初始化,初始化完成后,会产生package.json文件(相当于Maven的核心文件pom.xml)
- 我们康康package.json里的内容
其中,main中的入口文件可以自行创建并指定
js库的安装和卸载(本地安装和卸载)
- 在Terminal使用命令安装js库
- 卸载只需要在Terminal里执行如下命令即可
npm uninstall jquery
js库的安装和卸载(全局安装和卸载)
这里不进行演示
命令如下:
npm install jquery -g
默认是安装在
{sys.user}/node_modules
修改镜像源
- 首先安装一下nrm
npm install nrm -g
- 使用如下命令查看镜像源
nrm ls
- 修改镜像源,执行如下命令
nrm use 镜像源名(如taobao)
WebPack
WebPack概述
- WebPack实际上就是一个前端资源打包工具
- WebPack将根据模块的依赖关系进行静态分析,找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
- WebPack官网了解一下
安装
非常之简单
三行代码分别执行
npm install webpack -g
npm install webpack-cli -g
webpack -v #查看版本
当前我使用的版本是
极速入门
工程结构
- 创建src文件夹,在下面创建两个工具bar和done
bar.js
export default function bar(str) {document.write(str)
}
done.js
export function add(a,b) {return a+b
}
- 编写入口程序index.js,调用两个工具进行使用
index.js
import bar from "./src/bar";
import {add} from "./src/done";bar("20+30="+add(20,30))
- 创建webpack.config.js,即webapck的核心配置文件
webpack.config.js webpack的官网有参考代码
//引入路径解析器
const path = require('path');module.exports = {//程序入口entry: './index.js',//输出配置output: {//打包后包存储的路径path: path.resolve(__dirname, 'dist'),//打包后的文件名filename: 'bundle.js'}
};
-
终端执行webpack进行打包
打包完成后就会发现工程目录出现了dist目录,以及dist目录下的bundle.js文件 -
在index.html文件中引用打包后的文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主页</title><script src="./dist/bundle.js"></script>
</head>
<body></body>
</html>
尽管body里面什么内容也没有,但是因为我们调用了bar和done.所以页面上其实是会显示“20+30=50”的字样的
css打包
Webpack本身只能处理JavaScript模块,如果要处理其他类型的文件,就需要使用loader进行转换。
Loader可以理解为模块和资源的转换器,本身其实是一个函数,接受源文件作为参数,返回转换的结果,这样,编程人员可以通过require来加载任何类型的模块或文件(如CoffeeScript、JSX、LESS或图片)
Webpack提供两个工具处理样式表,css-loader和style-loader,css-loader提供你能够使用类似import和url(…)的方法实现require()功能,style-loader是将所有的计算后的样式加入到页面中,两者结合在一起才能使我们把样式表嵌入到webpack打包后的js文件中
- 首先我们需要安装一下css-loader和style-loader这两个工具
在终端执行如下命令
# --save是在本地保存
npm install style-loader css-loader --save-dev
安装完成后可以在工程目录下看到node_modules文件夹,里面下载了巨多的东西
然后通过npm init命令进行初始化后,在生成的package.json中可以看到两个工具被安装的信息
这里需要插播一下dependencies和devDependencies的区别
dependencies在打包时会被打包到最终的文件中,但devDependencies就不会被打包到最终的文件里
配置在devDependencies里的工具,只在打包的过程中被使用,在项目部署执行的时候并不需要
但如果这个工具在打包时和打包后都需要使用,那么把它放在dependencies下,如vue.js
- 编写css文件
- 在webpack.config.js里配置loader
webpack的官网有提供配置loader的方式,除了配置文件的方式,还有内联方式和CLI方式,但配置文件方式是最靠谱的,所以推荐配置文件方式
- 在入口程序index.js里进行引用该css文件
- 在终端使用webpack命令打包,运行html文件查看效果
更多推荐
Node+Npm+WebPack极速入门
发布评论