将包裹用作捆绑器进行反应应用

Webpack并不是镇上唯一的资产管理游戏游戏。包裹提供了引人入胜的替代方案，提供了零配置的简化资产捆绑。与其他要求广泛的设置代码的捆绑机不同，Parcel的简单性是一个主要优势。与更复杂的捆绑机相比，它的速度也值得注意，利用多核心处理的速度更快。

包裹的主要特征和好处包括：

• 有效的代码通过动态导入分配。
• 用于各种文件类型的多功能资产处理，包括HTML，CSS和JavaScript。
• 热模块替换（HMR）用于快速开发而无需持续的页面刷新。
• 明确的错误突出显示控制台，以便于调试。
• 支持环境变量管理开发和生产环境。
• 通过消除不必要的步骤来优化更快构建的生产模式。

本文演示了如何使用包裹构建React项目，展示了创建React应用程序的替代方案。让我们探索一种反应发展的方法。

项目设置

1. 创建项目目录：

 mkdir csstricks-react-parcel && cd $ _

2. 初始化package.json ：使用NPM或纱线：

 ＃npm
npm init -y

＃Yarn（本教程中使用）
YARN INIT -Y

3. 安装依赖项：在本地安装包裹和Babel：

纱线添加包裹捆绑Babel-Preset-env babel-preset-react-dev
纱线添加反应-dom

4. 配置babel：创建一个带有以下内容的.babelrc文件：

 {
  “预设”：[“ env”，“ react”]
}

5. 创建index.js （应用程序组件）：

从“反应”中导入反应；
从“反应”进口反应；

类应用程序扩展react.component {
  使成为（） {
    返回 （
      <react.fragment><h2 id="你好">你好！</h2></react.fragment>
    ）；
  }
}

const rootelement = document.getElementById（“ root”）;
Reactdom.render（<app></app> ，rootelement）;

6. 创建index.html （在src目录中）：

 


  <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>包裹反应示例</title>


  <div id="root"></div>

7. configure package.json （开始脚本）：

 “脚本”：{
  “ start”：“ node_env =开发包裹src/index.html  -  open”
}

8. 运行应用程序：执行yarn start 。该应用程序应在http://localhost:1234/浏览器中启动。

与Sass的造型

包裹包括邮政编码。要使用SASS，请安装必要的软件包：

纱线添加-DEV节点sass autoprefixer

postcss package.json 。

 “ Postcss”：{
  “模块”：false，
  “插件”：{
    “ autoprefixer”：{
      “浏览器”：[“> 1％”，“最后4个版本”，“ Firefox ESR”，“不是IE <h3 id="生产建造">生产建造</h3><p>配置您的<code>package.json</code>生产构建的JSON：</p><pre class="brush:php;toolbar:false"> “脚本”：{
  “ start”：“ node_env =开发包裹src/index.html  -  open”，
  “构建”：“ node_env =生产包裹构建dist/ index.html -public-url ./”
}

运行yarn build以在dist文件夹中创建可以生产的构建。诸如--out-dir ， --no-minify和--no-cache等选项提供了进一步的自定义。

废话（创建React App包裹）

创建React App包（废话）简化了项目设置：

 npx create-react-app-parcel my-app
CD my-app
纱线开始

结论

Parcel的易用性和优化的构建时间使其成为下一个React项目的强大竞争者。它日益普及（30,000颗Github星）说明了其社区的接受。

资源

• 包裹的例子
• 很棒的包裹

本教程的源代码的GitHub存储库（提供的链接）。

以上是将包裹用作捆绑器进行反应应用的详细内容。更多信息请关注PHP中文网其他相关文章！