前端基础

作者: End_枫 | 来源:发表于2020-12-09 09:54 被阅读0次

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，让 JavaScript 可以在脱离浏览器的环境下运行。
Node.js 同时提供了很多常用操作方法和全局变量，可以在代码中直接使用，比如 require，console.log，__dirname，setInterval，setTimeout 等等，可以认为是前后端项目中的 JS 开发包。
具体文档参考：Node.js 中文网

NPM

npm 全称为 Node Package Manager，是一个基于 Node.js 实现的包管理器，也是整个 Node.js 社区最流行、支持的第三方模块最多的包管理器。一般安装完 Node.js 时，默认就带了 npm，npm 常用命令如下：

npm init

创建并初始化一个 package.json 文件，package.json 文件是一个纯 JSON 文件，描述了项目中的一些信息，比如项目名称，版本号，第三方依赖，脚本信息等，一个简单的示例：

{
  "name": "my_package",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ashleygwilliams/my_package.git"
  },
  "dependencies" :
  {
    "foo" : "1.0.0 - 2.9999.9999",
    "bar" : ">=1.0.2 <2.1.2",
    "PackageA": "1.0.0"
  },
  "devDependencies": {
    "coffee-script": "~1.6.3"
  },
  "peerDependencies": {
    "PackageB": "1.0.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ashleygwilliams/my_package/issues"
  },
  "homepage": "https://github.com/ashleygwilliams/my_package"
}

关于 peerDependencies，考虑如下使用场景

比如我们项目的依赖 PackageA，而 PackageA 依赖 PackageB，如果不使用 peerDependencies 话，那么安装后的目录是这样的：

MyProject
|- node_modules
   |- PackageA
      |- node_modules
         |- PackageB

在项目中可以通过 require(PackageA) 使用 A，但是无法直接通过 require(PackageB) 使用 B，因为 Node 默认在 node_modules 目录下找

通过使用 peerDependencies 描述 PackageB，那么安装后项目是这样的：

MyProject
|- node_modules
   |- PackageA
   |- PackageB

参考：Package.json 各种依赖

npm install <package>

# 全局安装
npm install -g jshint

# 本地安装
npm install jshint

# 本地安装，并在 package.json 中添加 dependencies 依赖
npm install jshint --save

# 本地安装，并在 package.json 中添加 devDependencies 依赖
npm install jshint --save-dev

devDependencies 依赖是本地使用的依赖，不需要打包到项目中

npm uninstall <package>

# 卸载全局安装包
npm uninstall -g lodash

# 卸载本地安装包
npm uninstall lodash

# 卸载本地安装包并从 package.json 中删除 dependencies 依赖
npm uninstall --save lodash

# 卸载本地安装包并从 package.json 中删除 devDependencies 依赖
npm uninstall --save-dev lodash

npm update <package>

# 更新全局包
npm update -g lodash

# 更新本地 package.json 中制定的依赖包
npm update

npm run-script <command>

别名 npm run，执行 package.json 中定义的脚本，对于 test, start, restart, stop 名称，可以省略 run，

npm start
npm run start

npm run build

需要注意的是，对于本地命令工具，npm 默认会对脚本添加 node_modules/.bin 路径，不需要自己显示指定

{
    "scripts": {
        "test": "tap test/\*.js",
        "test": "node_modules/.bin/tap test/\*.js" # 不需要这么写
    }
}

Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 文件。

安装

# 全局安装
npm install -g webpack

# 安装到当前项目目录(一般使用这种方式)
npm install --save-dev webpack

使用

新建项目 WebpackDemo:

WebpackDemo
  |- node_modules
  |- app
    |- main.js
  |- public
    |- index.html
  |- package.json

基础用法

# {extry file} 入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file} 打包文件的存放路径
webpack {entry file} {destination for bundled file}

# 示例
node_modules/.bin/webpack app/main.js public/bundle.js

配置文件 webpack.config.js

通过创建 webpack.config.js 配置文件，来简化 webpack 的使用。
首先先了解 webpack 的四个核心概念：entry，output，loader，plugins

entry

entry 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，默认值为 ./src。
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

module.exports = {
  entry: './app/main.js'
};

output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname” 是 node.js 中的一个全局变量，它指向当前执行脚本所在的目录。

有了上面这个配置文件后，之前的命令就可以改成:

node_modules/.bin/webpack

结合前面讲的 package.json，通过配置 scripts 字段可以进一步简化：

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack" // 这里不需要指定路径，Node 自动会从 node_modules/.bin 目录下找
  },
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

现在我们打包只需要输入

npm start

前面说过，start 是一个特殊的命令，不需要加 run

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

loaders 需要单独安装并且需要在 webpack.config.js 中的 modules 关键字下进行配置，Loaders 的配置包括以下几方面：

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）

安装对应的 loader

npm install --save-dev css-loader
npm install --save-dev ts-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

常见 loader

Babel
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

Babel 其实是几个模块化的包，其核心功能位于称为babel-core 的 npm 包中，webpack 可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的 babel-env-preset 包和解析 JSX 的 babel-preset-react 包）。

安装 babel

npm install --save react react-dom

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

webpack.config.js

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

通过上面配置，我们就可以在项目中使用 React 以及 JSX 语法了

关于 Babel，参考 Babel 中文文档

css-loader 和 style-loader
css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能,style-loader 将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

# 安装
npm install --save-dev style-loader css-loader

// 使用
module.exports = {

   ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
};

请注意这里对同一个文件引入多个loader的方法。

CSS module
被称为 CSS modules 的技术意在把 JS 的模块化思想带入 CSS 中来，通过 CSS 模块，所有的类名，动画名默认都只作用于当前模块。Webpack 对 CSS 模块化提供了非常好的支持，只需要在 CSS loader 中进行简单配置即可，然后就可以直接把 CSS 的类名传递到组件的代码中，这样做有效避免了全局污染。具体的代码如下:

{
    test: /\.css$/,
    use: [
    {
        loader: "style-loader"
    }, 
    {
        loader: "css-loader",
        options: {
            modules: true, // 指定启用css modules
            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
        }
    }]
}

使用示例：

/* Greeter.css */
.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

/* Greeter.js */
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}> //使用cssModule添加类名的方法
        {config.greetText}
      </div>
    );
  }
}
export default Greeter

CSS预处理器
Sass 和 Less 之类的预处理器是对原生 CSS 的拓展，它们允许你使用类似于 variables, nesting, mixins, inheritance 等不存在于 CSS 中的特性来写 CSS，CSS 预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，只需要在webpack里使用相关 loaders 进行配置就可以使用了，以下是常用的CSS 处理loaders:

Less Loader
Sass Loader
Stylus Loader

plugins

插件（Plugins）是用来拓展 Webpack 功能的，它们会在整个构建过程中生效，执行相关的任务。

Loaders 和 Plugins 常常被弄混，但是他们其实是完全不同的东西，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，plugin 并不直接操作单个文件，它直接对整个构建过程其作用，比如打包优化，压缩，重新定义变量等。

Webpack 有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

插件使用

通过 npm 安装（非内置插件）
配置 webpack.config.js 文件

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new webpack.BannerPlugin('版权所有，翻版必究')
  ]
};

module.exports = config;

插件介绍

HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

Hot Module Replacement
许你在修改组件代码后，自动刷新实时预览修改后的效果。

其他优化插件
webpack 提供了一些在发布阶段非常有用的优化插件，它们大多来自于 webpack 社区，可以通过 npm 安装，通过以下插件可以完成产品发布阶段所需的功能

OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件

其他功能

Source Maps

开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的。

通过简单的配置，webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
[图片上传失败...(image-ab92c1-1607478774018)]

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

构建本地服务器

Webpack提供一个可选的本地开发服务器，这个本地服务器基于 node.js 构建，可以实现监听修改自动刷新的功能，不过它是一个单独的组件，在 webpack中进行配置之前需要单独安装它作为项目依赖:

npm install --save-dev webpack-dev-server

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

在终端中输入npm run server即可在本地的8080端口查看结果

发布

发布阶段主要是做一些优化，比如代码压缩，去掉调试等，dev 和 release 可以提供不同的 webpack.config.js 文件。

参考

前端基础

Node.js

NPM

npm init

npm install <package>

npm uninstall <package>

npm update <package>

npm run-script <command>

Webpack

安装

使用

配置文件 webpack.config.js

entry

output

loader

常见 loader

plugins

插件使用

插件介绍

其他功能

Source Maps

构建本地服务器

发布

参考

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读