注意：本文所有依赖包是目前最新版本的
现在很多开发朋友对于使用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包，欢迎推荐~