Parcel 教程?不需要。

栏目: 前端 · 发布时间: 2年前

来源: blog.zfanw.com

内容简介:是不是觉得webpack 配置过程非常痛苦?我是说,我们开发一个项目,更应该关心项目本身,而不是项目开发环境的搭建、配置、维护 - webpack 虽妙(万物皆可模块化),但配置繁多,常常让人抓耳挠腮。有痛苦的地方,就会产生新的解决方案。然后我们就有了各种基于 webpack 的零配置方案,比如

本文转载自:https://blog.zfanw.com/parcel-bundler-tutorial/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

是不是觉得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.
:sparkles:  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,这一切都不需要我们配置。

是了,这就是为什么我在标题里说,Parcel 不需要教程 - 都零配置了,还需要什么教程?

孰优孰劣

2017 年末 ,Parcel 就出来了,但我迟迟没有上手。直到最近,才终于在某个项目里试用它,与 webpack 对比,显然 Parcel 的体验要远胜 webpack。实际上,webpack 自 4.0 起,也大量引入默认配置项,减少用户配置工作,不妨认为,Parcel 是 webpack 的未来方向。但 webpack 的生态毕竟要更丰富,就我个人在实际项目中的使用情况,还有些 webpack 插件(配置)能做而 Parcel 零配置做不到的事情。当然,假以时日,Parcel 或许也能与 webpack 平起平坐 - 我十分期望那一天的到来。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

代码2.0

代码2.0

(美)劳伦斯·莱斯格 / 李旭、沈伟伟 / 清华大学出版社 / 2009-7-1 / 48.00

《代码2.0:网络空间中的法律》在西方发达国家已成为法律学、公共管理学、商学、传播学、政治学和信息科学技术专业的必读书目。对于政府管理者、法律执业者、ICT企业管理者、创意产业从业者和广大信息工程技术人员来说,这的确是一本能够启迪思维的难得之作。在众多以网络为主题的书籍中,这是一本问世近10年但居然没有过时的书!于是,它成为了经典之作,荣膺学术名著和畅销读物两项桂冠。一起来看看 《代码2.0》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具