[英]React project using parcel bundler instead of Webpack
We can start with React project using command create-react-app . 我们可以使用命令create-react-app从React项目开始。 But when we use this command we don't get idea about how it's bundle and pack all types of files using Webpack.
但是当我们使用这个命令时,我们不知道它是如何使用Webpack捆绑和打包所有类型的文件。
So I tried to build react app without create-react-app command using Webpack 4 and Babel 7 and I succeed. 所以我尝试使用Webpack 4和Babel 7在没有create-react-app命令的情况下构建react应用程序并且我成功了。
Now I want to do same app using parcel bundler. 现在我想使用parcel bundler做同样的应用程序。 as I read on different blogs I got an idea that parcel is easy then web pack and it's truly zero configuration set up.
正如我在不同的博客上看到的那样,我知道包裹很容易然后是网络包,它真的是零配置设置。
My project structure is 我的项目结构是
- src
|- components
|- styles
|- index.html
|- index.js
- package.json
This is simple project to start with parcel bundle so I've not add Redux or routing yet. 这是一个简单的项目,从包裹捆绑开始,所以我还没有添加Redux或路由。
What I want to achieve is 我想要实现的是
1). 1)。 As aspected React app should be run in browser using parcel bundler.
因为应该使用parcel bundler在浏览器中运行所谓的React应用程序。
2). 2)。 I want to use absolute paths when importing JS files.
我想在导入JS文件时使用绝对路径。
3). 3)。 I want to enable hot reloading.
我想启用热重装。
After few minutes of research on net I find the solution and it's truly zero configuration with parcel bundler. 经过几分钟的网络研究后,我找到了解决方案,并且使用包裹捆绑器实现零配置。
we just need to add 2 commands in package.json file 's script section. 我们只需要在package.json文件的脚本部分添加2个命令。
project structure is 项目结构是
- src
|- components
|- styles
|- index.html
|- index.js
|- App.js
- package.json
- .babelrc // this file will use to setup absolute path when import files
index.js
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import "./style/index.scss";
ReactDOM.render(<App />, root);
index.html is same file as create-react-app provide we just need div with id.
index.html与create-react-app提供的文件相同,我们只需要id为div。
App.js
App.js
import React, { Component } from "react";
import Count from "@components/Count"; // here I used absolute path. check .bablerc file
export default class App extends Component {
render() {
return (
<>
<div>this is App component</div>
<Count />
</>
);
}
}
components/Count.js
组件/ Count.js
import React, { Component } from "react";
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<>
count is: {this.state.count}
<br />
<button onClick={(prevState) => {this.setState({
count: prevState.count + 1
});
}}
>
Add count
</button>
</>
);
}
}
style/index.scss
风格/ index.scss
body {
background-color: red;
color: #fff;
text-align: center;
font-size: 40px;
}
note that we don't need to manually install node-sass package to use scss. 请注意,我们不需要手动安装node-sass包来使用scss。 parcel will handle for you.
包裹将为您处理。
package.json
的package.json
{
"name": "react_parcel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html/"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.3",
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
.bablerc
.bablerc
{
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"alias": {
"@components": "./src/components"
}
}
],
["react-hot-loader/babel"]
]
}
here we add alias for components folder so when we need to import any file from components folder we don't need to write relative path. 这里我们为components文件夹添加别名,所以当我们需要从components文件夹导入任何文件时,我们不需要编写相对路径。
npm run dev npm run dev
your server will start on localhost:1234 您的服务器将在localhost:1234上启动
I solved 2 issues but still need to figure out how to use hot reloading so if you guys have any idea related hot reloading please answer it. 我解决了2个问题,但仍然需要弄清楚如何使用热重装,所以如果你们有任何想法相关的热重装请回答。
for production build: npm run build 用于生产构建: npm run build
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.