现在 JS 项目越来越复杂,各式各样的语法规范,以及辅助的工具包特别多,也因此 Webpack 之类的打包工具非常流行,但是 Webpack 由于其强大的灵活性而导致它的配置文件相对复杂一些,大家想试验一些新库,或者新特性的的时候,可能光配置一个包含 es6, scss, hot-loader 等基础功能的 JS 项目都要花费很多时间。今天介绍了一款非常简便的 JS 打包工具 Parcel,零配置,1 分钟急速上手。但相对的灵活性较差,也不适用于真正大型的项目(在真实的部署环境下,我遇到了很多坑)。不过做简单的 Demo,小型网站,以及实验有趣的特性时,不失为一种不错的选择。
步骤非常简单:
- 全局安装 parcel-bundler
yarn global add parcel-bundler # npm install -g parcel-bundler
- 创建 package.json
yarn init -y # npm init -y
- 创建一个 index.html 入口页面
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
- 创建一个 index.js 文件
console.log('hello world')
- 执行 parcel index.html 启动网站
parcel index.html
# Server running at http://localhost:1234
# ✨ Built in (xx.xx)s.
- 浏览器中打开 http://localhost:1234 启动网站,完成配置!
总共只有两个文件,就完成了配置。可以使用 Parcel 自带的很多特性,ES6(Babel),Scss,hot-loader 等,甚至你在 JS 中用 import 添加一些包,首次启动时,Parcel 都帮你自动运行 npm install 安装好。怎么样,是不是超级方便,具体 Parcel 默认包含了哪些功能,请参见 Parcel 的官网 https://parceljs.org/
Parcel Github Repo: https://github.com/parcel-bundler/parcel