现在 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
网友评论