Sublime结合Webpack Babel构建自动化_一键打包转译前端代码工具链

要搭建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脚本。

1. 在项目根目录下打开终端，执行：

   npm set-script build "webpack"

   或者手动在

   package.json

   中添加：

   "scripts": {   "build": "webpack" }

2. 回到Sublime，点击菜单栏的 Tools > Build System > New Build System…

3. 输入以下内容并保存为

   webpack.sublime-build

   ：

   {   "cmd": ["npm", "run", "build"],   "selector": "source.js",   "working_dir": "$folder" }

4. 设置完成后，在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环境没问题，配置文件写对，就能顺利跑起来。