前端开发基础知识（nodejs、npm、es6、模块化、babel、webpack、css-loader、vue-cli）

汪博达

2023-12-01

vscode

项目

vscode没有项目的概念，取而代之的是文件夹，在vscode创建一个文件夹就相当于一个项目。

工作区

类似于eclipse和idea的工作空间，vscode不同的工作区可以分别启用和禁用各自的插件。
例如，前端开发建一个工作区web，该工作区安装并启用了live server插件，python开发建一个python区，该工作区可以禁用live server。

nodejs

Node.js是一个JavaScript解析引擎（浏览器的内核包括两部分核心：DOM渲染引擎和JavaScript解析引擎），可以在脱离浏览器的情况下运行JavaScript。
Node.js没有浏览器API，即document，window的等。
Node.js加了许多Node.js 专属API，例如文件系统，进程，http功能。
Node.js可以开发类似JavaWeb的后端程序。

下载安装nodejs：
https://nodejs.org/zh-cn/
一直点next即可，有一个“automatically install the necessary”出现的时候，勾选上然后继续next
安装完后在cmd窗口输入node检查是否安装成功

node -v

如何升级？
windows直接重新下载安装，并且要安装和上次目录保持一致即可（默认就是上次安装的目录，不需要动）。之前npm下载的依赖不会删除。

npm

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

创建项目

第一步：需要自己先建一个文件夹，然后用控制台（windows是cmd命令行窗口）进入该目录（vscode是选中文件夹后右键‘在终端中打开’）。
第二步：

npm init -y

npm项目约定俗称的项目结构

项目目录下应该建有src目录，源代码文件都放到这里。
打包输出的目录名称建议叫dist，打包之后的文件都放到这里。

添加项目依赖

先用控制台进入项目目录，然后使用install或者i命令，示例：

npm install jquery

npm i jquery

下载特定版本的依赖

npm install jquery@2.1.x

下载开发依赖

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖，初始化项目

其他命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

-S和-D参数

-D，–save-dev的简写，安装包会在package中的devDependencies对象中。devDependencies是在开发环境中要用到的。
-S（不加默认就是-S），–save的简写，安装包会在package中的dependencies对象中。dependencies是在生产环境中要用到的。

cnpm

由于npm的库都在国外，访问很慢，所以才有的cnpm，是npm仓库在国内的镜像，用来加速访问。
安装：

npm install -g cnpm -registry=https://registry.npm.taobao.org

使用：

cnpm install xxx

如果使用cnpm install xxx出现下面错误，则是node.js版本太低，应该安装低版本的cnpm或者升级node.js

Error: Cannot find module 'fs/promises'

yarn

和npm一样，只是yarn是船新版本的npm（开个玩笑哈哈）。
和npm相比，就是将npm的关键字都换了，比如install换成了add，uninstall换成了remove，update换成了upgrade。

ES6

参见：ECMAScript基础语法ES6入门

模块化

模块化产生的背景
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
模块化规范现在有两种：
CommonJS模块化规范（基于ES6语法之前）
ES6模块化规范（使用ES6语法）

CommonJS模块化

使用exports.方法名来定义

//文件=src/a.js
exports.mylog = function (str) {
    console.log(str)
}

使用require(路径/文件名不带后缀)来导入

//文件=src/b.js
const a=require('./a')
a.mylog("CommonJS模块化")

ES6模块化

注意，nodejs不支持ES6模块化
使用export default或者export function来定义

export default {
    mylog (str) {
        console.log(str)
    },
    ulog() {
        console.log('youuuuu')
    }
}

或者

export function mylog(str) {
    console.log(str)
}
export function ulog() {
    console.log('youuuuu')
}

使用import 模块别名 from '路径/文件名带后缀'来定义

//文件=src/c.js
import a from './a.js'
a.mylog("ES6模块化")

babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

安装babel-cli

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

#在任意位置
npm install -g babel-cli

查看是否安装成功

babel --version

配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则

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

安装转码器

#在项目根目录下
npm install -D babel-preset-es2015

转码

#在项目根目录下，整个src目录转码
# --out-dir 或 -d 参数指定输出目录
babel src -d dist

webpack

webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
常用于将多个js合并成一个js。

安装

全局安装

npm install -g webpack webpack-cli

或

npm install -g webpack
npm install -g webpack-cli

安装后查看版本号

webpack -v

配置

项目根目录下创建配置文件webpack.config.js

const path=require("path") //Node.js内置模块
module.exports= {
	entry: './src/main.js', //配置入口文件
	output: {
		path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
		filename: 'bundle.js'//输出文件
    }
}

上面代码的意思是：
读取目录src文件夹中的main.js（入口文件）内容，分析main.js的资源依赖，把相关的js文件打包成一个bundle.js，并放入dist目录中。

打包

webpack --mode=development
#执行后会生成bundle.js

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

"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
 }

运行npm命令执行打包

npm run dev #开发打包

或

npm run prod #生产打包

css-loader

webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css。

安装

#在项目根目录下
npm install -D style-loader css-loader

修改配置

const path=require("path") //Node.js内置模块
module.exports= {
	entry: './src/main.js', //配置入口文件
	output: {
		path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
		filename: 'bundle.js'//输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

打包

//文件=src/main.js
require('./style.css')

webpack --mode=development
#执行后会生成bundle.js，bundle.js文件里会包含了style.css内容

sass

层叠样式表语言
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器（webpack可以）将 Sass 代码转换为 CSS 代码。

安装

npm install -g sass

less

和sass差不多。less 文件后缀为 .less。
浏览器并不支持 less代码。因此，你需要使用一个 less预处理器（webpack可以，也可以在vscode上安装easy less插件自动转css）将 less代码转换为 CSS 代码。

安装

npm install -g less

vue-cli

vue-cli是vue项目构建打包工具
官网：https://cli.vuejs.org/zh/guide/

安装vue-cli

个人强烈推荐安装vue-cli3

npm install vue-cli -g #安装vue-cli2
npm install -g @vue/cli #安装vue-cli3
npm install -g @vue/cli-init #vue-cli3版本下使用vue init需要安装@vue/cli-init

新建vue项目

#vue-cli2
vue init webpack "项目名称" #在当前目录下创建一个"项目名称"的项目

#vue-cli3 create
vue create "项目名称" #在当前目录下创建一个"项目名称"的项目

vue-cli2打包

控制台进入项目根目录：

cd "项目名称"

下载项目依赖

#在项目根目录下
npm install

然后打包：

npm run dev # 或者：npm run build

vue-cli3打包

安装@vue/cli-service
cli-service可以使你像Live Server一样，直接在浏览器访问Vue项目，进行测试。
控制台进入项目根目录：

cd "项目名称"

安装serve：

npm install @vue/cli-service -g

运行服务：

npm run serve

编译并打包项目：
运行npm命令执行打包

npm run build #开发打包

如果打包之后，浏览器访问dist/index.html出现一片空白，那么需要在vue.config.js里新增

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,// 生产环境是否要生成 sourceMap
  publicPath: './',  //   部署应用包时的基本 URL
  outputDir: 'dist',  //   打包时输出的文件目录
  assetsDir: 'assets',  //   放置静态文件夹目录
  devServer:{},// dev环境下，webpack-dev-server 相关配置
  lintOnSave: false,//是否在开发环境下每次保存代码时都启用 eslint验证
  css:{}
})