极速入门"/>
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极速入门
发布评论