Powered by md-Blog  文 - 篇  访客 -

【前端工程化】解决方案操作示例


  分类:大前端  / 
更新:2020-11-01 17:25:17  /  创建:2020-02-21 20:42:23
不要删除

0、名词解释

Node.js

一个可以利用 JavaScript 开发服务器端应用的运行环境,可用做服务器、执行批量任务等。在前端开发里一般执行编译 CSS预编译语言、压缩、混淆JS、压缩图片等工程化任务。

NPM

一个随 Node.js 安装的包管理工具。
  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

CNPM

由于不可抗力的某些原因,npm 网络不是那么稳定。cnpm 诞生了!这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟一次以保证尽量与官方服务同步。

NVM

nvm 是让你在同一台机器上安装和切换不同版本的 node 的工具

Webpack

资源打包工具。它做的事情是,分析你的项目结构,找到 JavaScript模块 以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

Babel

可以将 ES6 等语法转换为目前浏览器识别的 JavaScript

1、环境安装

安装 NVM

github:https://github.com/nvm-sh/nvm
提供两种方式的安装

curl 安装:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

wget 安装:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

命令:

nvm ls-remote:列出所有可以安装的node版本号
nvm install v10.15.3:安装指定版本号的node
nvm use v10.3.0:切换node的版本,这个是全局的
nvm current:当前node版本
nvm ls:列出所有已经安装的node版本

安装 Node.js 和 NPM

nvm 列出可安装的版本:

nvm ls-remote

找到最新的长期支持版本:v12.14.1 (Latest LTS: Erbium) 截止发稿日

安装:

nvm install v12.14.1

验证:显示版本号即为正确安装

node -v
npm -v

2、安装cnpm(可选)

如果您网络优秀可忽略,使用方法:把命令行中的 npm 改成 cnpm 即可。

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

3、新建项目文件夹

新建文件夹

mkdir tpl_demo

进入

cd tpl_demo

4、npm 初始化

npm init -y
生成 package.json 文件。

5、安装软件包

例如:安装 moment.js 日期处理类库。http://momentjs.cn/

应用于生产环境:

npm i moment -S
生成 node_modules 文件夹,packages.json 发生变化:
"dependencies": {
    "moment": "^2.24.0"
}

6、新建文件

新建 src 目录

/src

新建入口文件 index.js

/src/index.js
import moment from 'moment';

const nowTime = moment().format();
console.log(nowTime);   // 输出当前日期时间

新建主页 index.html

/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TPL-DEMO</title>
    <script src="./dist/bundle.js"></script>
</head>
<body>
</body>
</html>

7、安装 webpack 4

应用于开发环境:

npm i webpack webpack-cli -D
packages.json 自动添加以下项:
"devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
}

新建 webpack 配置文件:

/webpack.config.js
'use strict';
const path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production'
};

8、安装 Babel 支持 ES6 语法

npm i @babel/core @babel/preset-env babel-loader -D
packages.json 自动添加以下项:
"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
}

添加 .babelrc 配置文件

/.babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}

增加 babel-loader 加载器

webpack.config.js 添加
module:{
    rules:[
        {test:/\.js$/,use:'babel-loader'}
    ]
}

9、添加:npm run build 运行指令进行构建

packages.json 自动添加以下项:
"scripts": {
    "build": "webpack"
},

以后构建目录为 /dist,在命令行中运行:

npm run build
此时生成 /dist 文件夹包含 bundle.jsbundle.js.map 两个文件。

10、安装 html-webpack-plugin

npm i html-webpack-plugin -D
packages.json 自动添加以下项:
"devDependencies": {
    "html-webpack-plugin": "^3.2.0",
},
webpack.config.js 添加:
const HtmlWebpackPlugin = require('html-webpack-plugin');

...

module.exports = {
    plugins: [new HtmlWebpackPlugin()]
}

运行构建指令

npm run build
/dist 目录将会多出 index.html 文件

11、添加:npm run dev 指令进行热更新

npm i webpack-dev-server -D
packages.json 自动添加以下项:
"devDependencies": {
    "webpack-dev-server": "^3.10.3",
},
package.json 添加运行脚本
"scripts": {
    "dev": "webpack-dev-server --open"
},
webpack.config.js
const webpack = require('webpack');
module.exports = {
    ...
    mode: 'development',
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',  // 设置目录
        hot: true   // 开启热更新
    }
    ...
};

运行 npm run dev 指令

npm run dev

默认会打开浏览器 index.html 在控制台中会输出当前时间:

2020-02-21T18:19:41+08:00

修改 index.js 的内容,将会实时刷新。

Ctrl + C 可终止脚本任务。

12、自动清理构建目录 dist

npm i clean-webpack-plugin -D
packages.json 自动添加以下项:
"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
},
webpack.config.js 添加:
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ],
}
我们可以尝试在 /dist 目录中添加一些文件,然后运行 npm run build,开启本插件将会自动清理该文件夹生成新的文件,关闭则旧的打包文件将会保留。

13、关闭性能提示

打包后终端如果提示:npm run build: WARNING in asset size limit: The following asset(s) exceed the recommended size limit

原因:webpack打包后的生成文件和入口文件体积过大,超过了默认值。

解决方法:

1、关闭webpack性能提示

webpack.config.js
performance: {
    hints: false, // 关闭性能提示
}

2、修改打包入口文件和生成文件的体积限制

webpack.config.js
performance: {
    hints: 'warning', // 枚举 false关闭
    maxEntrypointSize: 50000000, //入口文件的最大体积,单位字节
    maxAssetSize: 30000000, //生成文件的最大体积,单位字节
    assetFilter: function(assetFilename) { //只给出js文件的性能提示
      return assetFilename.endsWith('.js');
    }
}

14、总结

最后的文件大致如下,版本号为发稿日最近版本。之后 不做更新,只做参考使用。

/package.json
{
  "name": "tpl_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "moment": "^2.24.0"
  }
}
/.babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}
/src/index.js
import moment from 'moment';

const nowTime = moment().format();
console.log(nowTime);
/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TPL-DEMO</title>
    <script src="./dist/bundle.js"></script>
</head>
<body>
</body>
</html>
/webpack.config.js
'use strict';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    devtool: 'source-map',
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module:{
        rules:[
            {test:/\.js$/,use:'babel-loader'}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true   // 开启热更新
    },
    performance: {
        hints: false, // 关闭性能提示
    }
};

至此,教程接近尾声,更多的 Webpack 配置请参阅:《webpack4.0安装配置构建范例一条龙》文章。


不要删除

小站不易,感谢支持!