要搭建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 查看详情
在项目根目录下打开终端，执行：
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环境没问题，配置文件写对，就能顺利跑起来。
以上就是Sublime结合Webpack Babel构建自动化_一键打包转译前端代码工具链的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/223530.html
微信扫一扫 
支付宝扫一扫 
