一个可代替Webpack的构建工具：Snowpack

Webpack是过去几年中最受欢迎的JavaScript构建打包工具之一，这正是得益于它灵活的构建配置以及丰富的官方支持的第三方插件。

站在用户的角度思考问题，与客户深入沟通，找到平和网站设计与平和网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、虚拟主机、企业邮箱。业务覆盖平和地区。

Webpack 的主要功能是将你所有的 JavaScript 文件，连带所有从 NPM 导入的模块、图片、CSS 和其他网络资源，全部打包到一个可以被浏览器执行的文件中。

Webpack 也是一个复杂的打包工具，学习曲线也比较陡峭，因为它的灵活性意味着它有非常多的功能来应对各种不同的使用场景。更进一步讲，哪怕只是对一个文件进行了很小的改动，Webpack 会将你的整个 JavaScript 应用重新打包和构建。如果对 Webpack 的工作原理理解不到位，构建一个应用时可能要等半小时以上。

Webpack 是 2014 年发布的。在那个时候，浏览器基本不支持 ECMAScript Module (ESM) 的 import 和 export 语法，所以在浏览器中运行 JavaScript 的方式只能是将项目中所有的模块全部打包进一个文件。

这其中还包括其他的流程，比如使用 Babel 将 JavaScript 从较新版本转换为稍旧版本，以便浏览器可以运行该应用。使用 Webpack 最主要的目的是创造最好的开发体验，让 JavaScript 开发者可以使用最新的功能(ES6+)。

如今 ESM 语法已经被所有主流浏览器支持，所以将你所有的 JavaScript 文件打包在一起已经不是在浏览器中运行应用的必要条件了。

使用 Snowpack，无需进行打包配置

Snowpack 是一个 JavaScript 构建工具，它利用了浏览器对 ESM 的支持，让我们可以构建单个文件并将其发送到浏览器中。每一个被构建的文件都会被缓存，在我们每修改一个文件时，只有这一个文件会被 Snowpack 重新构建。

Snowpack 的开发服务器也做了优化，它只会在浏览器请求后构建该文件。这使得 Snowpack 可以即时启动(小于 50 毫秒)并且扩展到大型项目时也不会增加启动速度。我自己做尝试时启动服务器只用了 35 毫秒。

Snowpack 的构建过程

Snowpack 默认会将你的未打包应用部署到生产环境，但是你也要进行一些构建相关的优化，比如最小化、代码分割、tree-shaking、懒加载等等。

Snowpack 同时支持通过插件连接 Webpack 来打包生产版本的应用。这样，由于 Snowpack 已经转译了你的代码，你的打包工具(Webpack)只需要将常规的 HTML、CSS 和 JavaScript 文件打包。

这也是为什么你在打包过程中不需要复杂的 Webpack 配置文件。

最后，你也可以设置 package.json 中的 browserslist 属性，来设定支持的浏览器版本：

 
 
 
    
  
  
  
  1. /* package.json */ 
    2. 
  
  
  
  2. "browserslist": ">0.75%, not ie 11, not UCAndroid >0, not OperaMini all", 
    3.

在你执行 snowpack build 指令来构建生产环境的项目时，该属性会自动被应用。Snowpack 不会在构建开发版本时执行任何转译，所以这不是一个问题，因为大部分时间你都会在最新的浏览器版本下开发。

上手 Snowpack

要开始使用 Snowpack，你可以立即使用 Create Snowpack App (CSA) 和 NPX 来创建 Snowpack 应用。例如，你可以用如下指令来用 CSA 新建一个初始化 React 应用：

 
 
 
    
  
  
  
  1. npx create-snowpack-app react-snowpack --template @snowpack/app-template-react 
    2.

一个新的 react-snowpack 文件夹会被创建，并且附带最基础的依赖：

 
 
 
    
  
  
  
  1. { 
    2. 
  
  
  
  2. "scripts": { 
    3. 
  
  
  
  3.   "start": "snowpack dev", 
    4. 
  
  
  
  4.   "build": "snowpack build", 
    5. 
  
  
  
  5.   "test": "web-test-runner \"src/**/*.test.jsx\"", 
    6. 
  
  
  
  6.   "format": "prettier --write \"src/**/*.{js,jsx}\"", 
    7. 
  
  
  
  7.   "lint": "prettier --check \"src/**/*.{js,jsx}\"" 
    8. 
  
  
  
  8. }, 
    9. 
  
  
  
  9. "dependencies": { 
    10. 
  
  
  
  10.   "react": "^17.0.0", 
    11. 
  
  
  
  11.   "react-dom": "^17.0.0" 
    12. 
  
  
  
  12. }, 
    13. 
  
  
  
  13. "devDependencies": { 
    14. 
  
  
  
  14.   "@snowpack/plugin-dotenv": "^2.0.5", 
    15. 
  
  
  
  15.   "@snowpack/plugin-react-refresh": "^2.4.0", 
    16. 
  
  
  
  16.   "@snowpack/web-test-runner-plugin": "^0.2.0", 
    17. 
  
  
  
  17.   "@testing-library/react": "^11.0.0", 
    18. 
  
  
  
  18.   "@web/test-runner": "^0.12.0", 
    19. 
  
  
  
  19.   "chai": "^4.2.0", 
    20. 
  
  
  
  20.   "prettier": "^2.0.5", 
    21. 
  
  
  
  21.   "snowpack": "^3.0.1" 
    22. 
  
  
  
  22. } 
    23. 
  
  
  
  23. } 
    24.

你立即就可以使用 npm start 指令运行这个应用。本地的调试服务器会在 8080 端口运行。CSA 的 React 模板和 Create React App 的默认模板非常相似：

Snowpack 支持主流库的 许多官方模板，如 React、Vue 和 Svelte。你只需要在指令中加入 --template 选项。

结语

你使用一个打包工具时应该是因为你想要使用它，而不是因为你需要使用它 —— Snowpack 官方文档

Webpack 和 Snowpack 的发布相隔了数年，尽管 Webpack 一直是打包 JavaScript 模块时人气最高的选择，但浏览器对 ESM 模块的支持开创了一种新的开发 Web 应用的方式。

伴随着不打包开发以及开发中快速构建应用的能力，Snowpack 将成为一个激动人心的 Webpack 替代品，它让我们可以更轻松地开发 JavaScript 应用。与此同时，它还能让你利用 Webpack 打包生产版本，对你的应用实现构建优化。

观看Snowpack 的官方文档，可了解更多。

原文：https://blog.bitsrc.io/snowpack-an-alternative-build-tool-to-webpack-9e8da197071d

网站标题：一个可代替Webpack的构建工具：Snowpack
链接分享：http://www.shufengxianlan.com/qtweb/news25/299175.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

电子商务知识

行业网站建设

响应式网站　　 　分类目录网站　　 　西信服务器托管　　 　成都网站建设　　 　成都微商城开发　　 　重庆教育培训网站建设　　 　重庆水土机房托管　　 　成都学生服定制　　 　四川成都seo网站优化　　 　资阳网站建设　　 　手机网站　　 　Google外贸推广　　 　德阳做网站　　 　成都机柜租用　　 　德阳电信服务器托管　　 　新都网站建设　　 　app软件开发　　 　成都网站优化　　 　西云服务器托管　　 　成都网站营销