共计 3353 个字符，预计需要花费 9 分钟才能阅读完成。
注意：本文所有依赖包是目前最新版本的
现在很多开发朋友对于使用 webapck、babel 搭建开发环境已经不陌生，但很少去系统性的了解项目依赖。
本文从环境依赖包说起，让你对自己的开发环境有更深的了解。
为了简单，我们将依赖分个类：Babel 相关????、Webpack 相关????、可选的依赖包 。
注意：带???? 是指 必需的依赖，下面我们一个一个来说。
Babel 相关????
要使用最新的 ES6+ 语法，必须少不了 Babel 转码，那么要搭建一个完全体的环境，应该使用哪些依赖呢？
首先，我们安装最核心的依赖：@babel/cli、@babel/core、@babel/polyfill、@babel/register、core-js
下面是他们的一些简单解释：
{
/*
Babel 自带了一个内置的 CLI 命令行工具，可通过命令行编译文件。*/
"@babel/cli": "^7.4.3",
/*
看到 `core` 就知道它是 `babel` 的核心，一些转码操作都是基于它完成的,
所以它是必须的依赖。*/
"@babel/core": "^7.4.3",
/*
Babel 默认只转换新的 JavaScript 语法，但是不转换新的 API，比如
`Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、`Symbol`、`Promise` 等全局对象，以及一些定义在全局对象上的方法（比
如 `Object.assign`）都不会转码。而 `@babel/polyfill` 就可以做到。*/
"@babel/polyfill": "^7.4.3",
/*
让 webpack.config.babel.js 也支持 ES6 语法
*/
"@babel/register": "^7.4.0",
/*
通俗说就是动态 polyfill，它可以动态加载需要的新 API，具体可以看 https://github.com/zloirock/core-js#readme
*/
"core-js": "3",
}下面我们安装必需的 preset 和 plugin：@babel/preset-env、@babel/plugin-proposal-class-properties、@babel/plugin-proposal-decorators、@babel/plugin-proposal-object-rest-spread、@babel/plugin-syntax-dynamic-import
下面是它们的一些解释：
{
/*
根据指定环境来转码，这个不用说，必装
*/
"@babel/preset-env": "^7.4.3",
/*
对 class 中属性初始化语法、static 等语法进行处理
*/
"@babel/plugin-proposal-class-properties": "^7.4.0",
/*
装饰器语法处理
*/
"@babel/plugin-proposal-decorators": "^7.4.0",
/*
对象 rest、spread 语法处理
*/
"@babel/plugin-proposal-object-rest-spread": "^7.4.3",
/*
import()语法处理
*/
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
}安装好了以上 preset 和 plugins，我们需要新建一个 .babelrc 文件来使用它们：
{
"presets": [
[
"@babel/env",
{
"useBuiltIns": "usage",
// 如果 useBuiltIns 选项为 usage，则要申明 corejs 的版本，这也是为什么要安装 core-js 的原因
"corejs": "3",
"loose": true
}
],
"@babel/typescript", // 如果你的环境有 typescript，记得安装它
"@babel/react" // 如果你使用了 react，也要记得安装哦
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{"legacy": true}
],
[
"@babel/proposal-class-properties",
{"loose": true}
],
"@babel/proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import"
]
}
以上我们对于 ES6+ 最新语法的转码已经完全没有问题了，下面我们开始说说 Webpack 有哪些必需要安装的依赖
Webpack 相关????
上面的 Babel 转码已经配置完成。但我们要使用它们，还要依靠 webpack 来告诉我们需要转码的项目入口以及在转码过程中需要的配置（比如 loader）。
既然需要 webpack，那么我们安装 webapck 以及它必需的依赖包：webpack、webpack-cli、webpack-dev-server、babel-loader、html-webpack-plugin
安装完成后我们新建webpack.config.babel.js，然后我们来配置一下：
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
mode: 'development',
entry: {app: path.resolve(__dirname, '../src/index.tsx')
},
devtool: 'cheap-module-source-map',
output: {path: path.resolve(__dirname, '../build'),
filename: 'bundle-[name]-[hash].js',
chunkFilename: 'chunk-[name]-[hash].js'
},
resolve: {extensions: ['.tsx', '.ts', '.js', '.less', '.json'],
modules: ['node_modules']
},
module: {
rules: [
{test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{loader: 'babel-loader'}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters: {title: 'test'}
})
],
devServer: {
port: 8080,
host: 'localhost',
disableHostCheck: true
}
};
细心的人看出来，上面的配置用的是 ES6 的写法，要做到这点需要满足：
- 文件名称必须是
webpack.config.babel.js - 需要安装
@babel/register这个我们前面已经安装了
tips: 这里我使用的是 ejs 作为 html 的模板。
到这里，必需的依赖包已经安装完成了，下面的可选依赖是根据大家项目的具体情况去安装，比如样式、图片、字体、css 压缩配置等等 …
这里我推荐几个好用的依赖包：
{
/*
将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap
*/
"mini-css-extract-plugin": "^0.6.0",
/*
css 压缩
*/
"optimize-css-assets-webpack-plugin": "^5.0.1",
/*
对打包的 js 进行压缩处理的 webapck 插件
*/
"terser-webpack-plugin": "^1.2.3",
/*
多进程处理打包，加快打包速度
*/
"thread-loader": "^2.1.2",
/*
webpack 打包进度条
*/
"webpackbar": "^3.2.0"
}至于 webpack 里的各种 loader，大家根据自己的项目去安装吧。
就说到这里啦，如果你有好用的 npm 包，欢迎推荐~
