阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Parcel 教程

      webpack 痛点

      是不是觉得 webpack 配置过程非常痛苦?

      我是说,我们开发一个项目,更应该关心项目本身,而不是项目开发环境的搭建、配置、维护 - webpack 虽妙(万物皆可模块化),但配置繁多,常常让人抓耳挠腮。

      有痛苦的地方,就会产生新的解决方案。然后我们就有了各种基于 webpack 的零配置方案,比如 create-react-app,又或 vue-cli。相比 webpack,它们给我们的体验简直是如沐春风。

      那么,同属零配置阵营的 Parcel 又如何?

      Parcel 初体验

      假设我要在 parcel-react 目录下新建一个 React 单页面应用。

      先来初始化目录:

      $ mkdir parcel-react
      $ cd parcel-react
      $ npm init -y
      

      初始化完成后,第一个映入我们脑海的,当然是一个 html 文件。我们需要一个 index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Parcel</title>
        </head>
        <body></body>
      </html>
      

      然后,我们还需要一个入口文件 index.js。我们将它加入 index.html 中:

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Parcel</title>
        </head>
        <body>
          <script src="./index.js"></script>
        </body>
      </html>
      

      接下来安装 reactreact-dom - 注意,Parcel 是零配置,不是零安装,所以该装的依赖我们还是要装的:

      $ npm install react react-dom
      

      安装完成后在 index.js 中添加代码:

      import React from 'react'
      import { render } from 'react-dom'
      render(<div>hello react</div>, document.body)
      

      之后再安装 Parcel:

      $ npm install parcel-bundler -D
      

      然后执行 npx parcel index.html 来启动开发服务器:

      $ npx parcel index.html
      Server running at http://localhost:50909 - configured port 1234 could not be used.
      ✨  Built in 3.13s.
      

      接着在浏览器中打开该网址 - 一切顺利,我们看到文字了。

      是的,在 Parcel 下,我们不需要像 webpack 那样安装 babel-loader、配置 .babelrc 才能编译 JSX 语法。

      那么 CSS 又如何?我们知道 webpack 下可以通过 css-loaderstyle-loader 加载 CSS 的。

      我们来试试。

      在项目下添加 index.css:

      .container {
        color: blue;
      }
      

      然后调整 index.js 代码:

      import React from 'react'
      import { render } from 'react-dom'
      import './index.css'
      render(<div className="container">hello react</div>, document.body)
      

      保存,页面自动刷新,文字已经变成蓝色。

      那图片呢?和 CSS 一样,我们只管 import/require,不需要额外任何的配置。

      构建

      至于最后的构建,也不过就一行命令:

      $ npx parcel build index.html
      

      Parcel 打包出了 JavaScript、CSS、图片,当然,还有我们的 index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Parcel</title>
          <link rel="stylesheet" href="/parcel-react.4bf54ac4.css" />
        </head>
        <body>
          <script src="/parcel-react.e00c84ee.js"></script>
        </body>
      </html>
      

      与前面的 index.html 做个比较:

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Parcel</title>
        </head>
        <body>
          <script src="./index.js"></script>
        </body>
      </html>
      

      Parcel 自动插入构建后的 CSS、JavaScript,这一切都不需要我们配置。

      孰优孰劣

      与 webpack 对比,显然 Parcel 的体验要远胜 webpack。

      实际上,webpack 自 4.0 起,也大量引入默认配置项,减少用户配置工作,不妨认为,Parcel 是 webpack 的未来方向。

      但 webpack 的生态毕竟要更丰富,就我个人在实际项目中的使用情况,还有些 webpack 插件(配置)能做而 Parcel 零配置做不到的事情。

      参考

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录