parcel react_如何使用Parcel设置React应用
parcel react
For a long time Webpack was one of the biggest barriers-to-entry for someone wanting to learn React. There's a lot of boilerplate configuration that can be confusing, especially if you're new to React.
长期以来, Webpack一直是想要学习React的人最大的入门障碍之一。 有很多样板配置可能会令人困惑,尤其是在您不熟悉React的情况下。
Even in a talk trying to show how easy React is to set up, it can be very difficult to try and learn each and every step in the setup process.
即使在试图说明React设置多么简单的演讲中 ,尝试并学习设置过程中的每个步骤也可能非常困难。
Not too long after React was first out of beta, the team at Facebook made create-react-app. It was an attempt to make spinning up a (very fully-loaded version of a) React app as simple as typing a single command:
在React首次退出Beta版后不久,Facebook的团队制作了create-react-app 。 试图使旋转(非常完整的版本)React应用程序变得像键入单个命令一样简单:
npx create-react-app my-app
Nice! And honestly, this 👆 method of creating a new React app is awesome if you want something that has lots of bells and whistles right from the get-go, and you're okay with having your app start as a fairly heavy/large app.
真好! 老实说,如果您想要一开始就具有很多风吹草动的东西, 并且可以将应用程序从一个相当大/大型的应用程序开始,那么创建新的React应用程序的方法非常棒。
That heaviness comes from the many dependencies, loaders, plugins, and so on automatically installed as
node_modulesthat take up a lot of space for each app. The Finder summary image below is from one of my create-react-app apps. 😱
node_modules来自自动安装为
node_modules的许多依赖项,加载程序,插件等,每个应用程序占用大量空间。 下面的Finder摘要图片来自我的一个create-react-app应用程序。 😱
包裹介绍 (Introducing Parcel)
Parcel is a "Blazing fast, zero configuration web application bundler." This means it handles a lot of the hard bundling stuff for you under the hood and allows you to create a relatively lean setup of React (or any other web project that requires bundling).
Parcel是一个“快速,零配置的Web应用程序捆绑包”。 这意味着它在幕后为您处理了很多硬捆绑的内容, 并允许您创建相对精简的React设置(或任何其他需要捆绑的 Web项目)。
So, let's see what it takes to set up the bare bones "Hello World" React app that displays an
h1element.
因此,让我们来看看如何设置显示
h1元素的裸露“ Hello World” React应用程序。
步骤1:为您的项目创建一个新文件夹 (Step 1: Create a new folder for your project)
Easy enough. 😏
很简单。 😏
步骤2:建立您的package.json
档案 (Step 2: Create your package.json
file)
In terminal,
cdinto the new folder and run:
在终端中,
cd进入新文件夹并运行:
npm init -y
This automatically creates the
package.jsonfile.
这将自动创建
package.json文件。
第三步:安装Parcel,React和ReactDOM (Step 3: Install Parcel, React, and ReactDOM)
npm install --save-dev parcel-bundler # Shorthand version: npm i -D parcel-bundler npm install react react-dom # Shorthand version: npm i react react-dom # Note that npm will automatically save dependencies to package.json now, so there's no longer a need to do npm install --save ...
第4步:向package.json
添加一个“开始”脚本 (Step 4: Add a "start" script to package.json
)
In the
package.jsonfile, in the "scripts" section, add the following "start" script:
在
package.json文件的“脚本”部分中,添加以下“开始”脚本:
"start": "parcel index.html --open"
第5步:创建index.html
文件并添加几行 (Step 5: Create the index.html
file and add a couple lines)
In VS Code, you can create a new file called
index.htmland use the built-in emmet shortcut to create a standard boilerplate HTML file by typing an exclamation point and hitting the Tab key on your keyboard.
在VS Code中,您可以创建一个名为
index.html的新文件,并使用内置的emmet快捷方式,通过键入感叹号并单击键盘上的Tab键来创建标准的样板HTML文件。
Before we move on, we need to add 2 things:
在继续之前,我们需要添加两件事:
A
div
placeholder where our React app will be inserted将在其中插入我们的React应用的
div
占位符A
script
to read in the JavaScript entry file (which we will create next)要读取JavaScript入口文件的
script
(我们将在接下来创建)
In the
bodyof
index.html, add:
在
index.html的
body中,添加:
<body> <div id="root"></div> <script src="./index.js"></script> </body>
步骤6:建立index.js
档案 (Step 6: Create the index.js
file)
Create a new file called
index.jsand enter your bare bones React code:
创建一个名为
index.js的新文件,然后输入您的裸露React代码:
// index.js import React from "react" import ReactDOM from "react-dom" ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))
步骤7:开始! (Step 7: Start it up!)
That's it! Now from the terminal, run:
而已! 现在从终端运行:
npm start
Parcel will handle the rest, and you'll have a fully-functional React app.
包裹将处理其余部分,您将拥有一个功能齐全的React应用程序。
结论 (Conclusion)
If you're interested, take some time to peruse the Parcel documentation to better understand all the awesomeness that comes with using Parcel, without requiring any configuration on your end.
如果您有兴趣,请花一些时间仔细阅读Parcel文档,以更好地了解使用Parcel所带来的所有出色功能,而无需进行任何配置。
Out of the box, Parcel comes with support for all kinds of common web development extensions, transpilers, syntaxes, and so on.
开箱即用,Parcel支持各种常见的Web开发扩展,编译器,语法等。
Although it's not tiny, the node_modules from a Parcel app take up 50% less space on your computer:
尽管不小 ,但Parcel应用程序中的node_modules占用的计算机空间减少了50%:
Thanks, Parcel!
谢谢,包裹!
翻译自: https://www.freecodecamp.org/news/how-to-up-a-react-app-with-parcel/
parcel react
- 如何在已有的 Web 应用中使用 ReactJS
- 直播|百安居前端架构师陈国兴:如何使用React构建同构(isomorphic)应用
- 使用iis设置虚拟主机(如何用同一端口ip对应不同web应用)
- android intent filter浏览器应用的设置,如何使用choose-box选择应用
- 如何使用webpack+react+redux从头搭建Todolist应用
- iOS应用中如何设置使用的语言
- 挨踢部落直播课堂第七期:如何使用React构建同构(isomorphic)应用
- C# vs中应用设置变量如何绑定及代码中如何使用
- 我是如何使用React+Redux构建大型应用的
- React_react如何使用State设置数据
- 使用Parcel零配置创建React应用(译)
- 如何使用Lua扩展C/C++应用系列2
- 嵌入应用:如何制作和使用Jffs2文件系统 (zhuan)
- 在vs2005中如何设置使用Jmail收发邮件
- 如何在Open C/C++应用中使用Boost.Regex
- 如何使用脚本set-env来设置环境变量[转]
- 使用IE打印,如何设置默认纸张大小,页边距等?(求救!!)
- 如何设置NetBeans5.5使用的语言
- ORACLE如何在有视图的SQL中使用hint(提示)来设置视图内的SQL查询方式
- MOSS 2007应用日记(7)――如何设置库模板