要搭建sublime配合webpack和babel的前端构建流程，1. 安装node.js和npm环境；2. 初始化项目并安装webpack和babel依赖；3. 配置webpack和babel文件；4. 在sublime中设置构建系统；5. 可选配置监听文件变化自动打包。具体步骤包括下载node.js验证版本、使用npm init初始化项目、安装webpack、babel-loader等依赖、创建webpack.config.js和.babelrc配置文件、在sublime中新建构建系统并配置npm脚本命令、最后通过修改脚本和构建配置实现watch模式自动打包，整个流程简单直接但需注意细节。
用Sublime配合Webpack和Babel搭建一个自动化的前端代码构建流程，其实并不复杂，但能极大提升开发效率。尤其是当你希望快速写代码、自动转译ES6+语法、打包模块化代码时，这个工具链特别实用。
下面我从几个关键点出发，讲讲怎么把Sublime、Webpack 和 Babel 搭起来，实现一键打包和转译。
安装Node.js和npm环境
要使用Webpack和Babel，首先得有Node.js和npm环境。这一步是基础，但很多人容易忽略版本问题。
立即学习“前端免费学习笔记（深入）”；
- 去官网下载安装最新LTS版本的Node.js（推荐），安装后自动带上了npm
- 打开终端或命令行输入
node -v
和npm -v
看是否输出版本号 - 推荐使用nvm来管理多个Node版本，开发多个项目时更方便
初始化项目并安装Webpack和Babel
在项目根目录下执行初始化命令：
npm init -y
然后安装Webpack和Babel相关依赖：
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
接着创建一个基础的Webpack配置文件
webpack.config.js，内容如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
};再创建一个Babel配置文件
.babelrc：
{
"presets": ["@babel/preset-env"]
}这样就完成了基本的构建配置。
在Sublime中配置构建系统
Sublime本身不直接运行Webpack，但可以通过自定义构建系统来调用npm脚本。
-
在项目根目录下打开终端，执行：
npm set-script build "webpack"
或者手动在
package.json
中添加："scripts": { "build": "webpack" } 回到Sublime，点击菜单栏的 Tools > Build System > New Build System...
-
输入以下内容并保存为
webpack.sublime-build
：{ "cmd": ["npm", "run", "build"], "selector": "source.js", "working_dir": "$folder" } 设置完成后，在Sublime里按
Ctrl + B
就能一键执行Webpack打包了
加点小优化：监听文件变化自动打包
如果你希望每次保存代码后自动打包，可以加个watch模式：
修改
package.json中的脚本：
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
}然后修改Sublime的构建配置文件：
{
"cmd": ["npm", "run", "watch"],
"selector": "source.js",
"working_dir": "$folder"
}这样，每次你在Sublime中保存JS文件，Webpack就会自动重新打包。
基本上就这些。整个流程看起来有点步骤，但每一步都很直接，不复杂但容易忽略细节。只要Node环境没问题，配置文件写对，就能顺利跑起来。
