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脚本。

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

79

查看详情

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

以上就是Sublime结合Webpack Babel构建自动化_一键打包转译前端代码工具链的详细内容，更多请关注php中文网其它相关文章！