胖蔡说技术
随便扯扯

使用Parcel作为React应用程序的打包工具

您可能已经熟悉用于项目资产管理的webpack。然而,还有另一个很酷的工具叫Parcel,它与webpack相当,因为它有助于轻松捆绑资产。Parcel真正闪光的地方在于,它不需要任何配置就可以启动和运行,而其他捆绑器通常需要编写大量代码才能启动。此外,Parcel在运行时速度极快,因为它利用了多核处理,而其他人则处理复杂而繁重的转换。

因此,简而言之,我们正在研究一些功能和优点:

  • 使用动态导入进行代码拆分
  • 任何类型文件的资产处理,当然也包括HTML、CSS和JavaScript
  • 热模块更换,在开发过程中无需刷新页面即可更新元素
  • 代码中的错误在记录时会突出显示,便于查找和更正
  • 易于区分本地开发和生产开发的环境变量
  • 通过防止不必要的构建步骤来加快构建的“生产模式”

希望您开始看到使用Parcel的充分理由。这并不是说它应该100%或一直使用,而是说在一些好的情况下它很有意义。

在本文中,我们将看到如何使用Parcel来设置React项目。在我们进行这项工作的同时,我们还将查看Create React App的替代方案,我们可以将其与Parcel一起用于开发React应用程序。这里的目标是以Parcel为例,了解React中还有其他工作方法。

创建一个新的工程

好的,我们首先需要的是一个项目文件夹,以便在本地工作。我们可以创建一个新文件夹,并直接从命令行导航到该文件夹:

$ mkdir csstricks-react-parcel && $_

接下来,让我们在那里获得我们必须的package.json文件。我们可以通过运行以下操作之一来使用npmYarn

## Using npm
$ npm init -y

## Using Yarn, which we'll continue with throughout the article
$ yarn init -y

这在我们的项目文件夹中为我们提供了一个package.json文件,其中包含我们在本地工作所需的默认配置。说到这一点,包包可以全局安装,但在本教程中,我们将作为开发依赖项在本地安装它。

我们在React工作时需要Babel,所以让我们开始吧:

$ yarn add parcel-bundler babel-preset-env babel-preset-react --dev

接下来,我们需要安装开发框架React、ReactDOM:

$ yarn add react react-dom

然后需要配置我们的babel配置文件:babel.config.js

{
  "presets": ["env", "react"]
}

接下来,我们在一个新的index.js文件中创建我们的基础应用程序组件。这里有一个简单返回“Hello”标题的快速方法:

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h2>Hello!</h2>
      </React.Fragment>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我们需要一个HTML文件来安装应用程序组件,所以让我们在src目录中创建一个index.HTML文件。同样,这里有一个非常简单的shell

<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 React Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

我们将使用我们之前安装的Parcel软件包。为了实现这一点,我们需要编辑package.json文件中的启动脚本,使其看起来如下:

"scripts": {
  "start": "NODE_ENV=development parcel src/index.html --open"
}

最后,让我们回到命令行,运行yarn start。应用程序应该启动并打开一个指向的新浏览器窗口http://localhost:1234/.

使用样式

Parcel开箱即用PostCSS发货,但如果我们想使用其他东西,我们完全可以做到。例如,我们可以在项目中安装node-sass来使用sass

$ yarn add --dev node-sass autoprefixer

我们已经有了autoprefixer,因为它是一个PostCSS插件,所以我们可以在package.jsonPostCSS块中进行配置:

// ...
"postcss": {
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
      "flexbox": "no-2009"
    }
  }
}

设置生产环境

我们希望确保我们的代码和资产是为生产使用而编译的,所以让我们确保告诉我们的构建过程这些代码和资产将去哪里。同样,在package-json中:

"scripts": {
  "start": "NODE_ENV=development parcel src/index.html --open",
  "build": "NODE_ENV=production parcel build dist/index.html --public-url ./"
}

运行yarn run构建现在将构建用于生产的应用程序,并将其输出到dist文件夹中。如果我们愿意,我们可以添加一些额外的选项来进一步完善:

  • --out-dir 目录名:这是为了使用生产文件的另一个目录,而不是默认的dist目录。
  • –no-minify:缩小是默认启用的,但我们可以使用此命令禁用。
  • –no-minify:这允许我们禁用文件系统缓存。

CRAP (Create React App Parcel)

Create React App Parcel(CRAP)是由Shawn Swyz Wang构建的一个包,用于帮助快速为Parcel设置React应用程序。根据文档,我们可以通过运行以下程序来引导任何应用程序:

$ npx create-react-app-parcel my-app

这将创建我们开始工作所需的文件和目录。然后,我们可以迁移到应用程序文件夹并启动服务器。

$ cd my-app
$ yarn start

Parcel 已全部设置完全

Parcel值得在您的下一个React应用程序中进行探索。事实上,没有必要的配置,捆绑包时间是超级优化的,这使得Parcel值得在未来的项目中考虑。而且,GitHub上有30000多颗星,看起来它在社区中越来越受欢迎。

其他

  • Parcel Examples::使用各种工具和框架封装示例。
  • Awesome Parcel:一份精心策划的清单,里面有很棒的Parcel资源、库、工具和样板。
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » 使用Parcel作为React应用程序的打包工具
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏