用 webpack 和 Parcel 分别搭建第一个 ReactApp
发布时间：2020-12-15 06:30:11 所属栏目：百科 来源：网络整理
导读：学习 React 可以用以下方法直接创建一个 ReactApp,本文主要介绍如何手动用 Webpack 和 Parcel 来搭这个环境。 $ npm install -g create-react-app$ create-react-app my-app$ cd my-app$ npm start 使用淘宝 NPM 镜像 使用 React、Webpack、Parcel、babel 这
|
学习 React 可以用以下方法直接创建一个 ReactApp,本文主要介绍如何手动用 Webpack 和 Parcel 来搭这个环境。 $ npm install -g create-react-app $ create-react-app my-app $ cd my-app $ npm start
使用淘宝 NPM 镜像使用 React、Webpack、Parcel、babel 这些工具需要安装很多依赖包，不走代理的话速度会非常慢，也很容易出错，所以这里推荐使用淘宝的 npm 镜像来安装，速度非常理想。 使用淘宝镜像安装 npm 包只需要两步即可：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
只需要将 npm 替换成 cnpm 即可获得高速下载。 $ cnpm install [name] 下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。 用 webpack 开始第一个 React初始化一个 json 配置文件$ npm init -y 在 "scripts": {
"start": "webpack-dev-server","test": "echo "Error: no test specified" && exit 1"
},
安装 React$ cnpm install react react-dom --save 安装编译工具 babel$ cnpm install babel-preset-env babel-preset-react babel-loader --save-dev 安装打包工具 wepback全局的和当前文件夹的最好都装上。 $ cnpm install webpack webpack-cli --save-dev $ cnpm install webpack-dev-server --save-dev $ cnpm install webpack webpack-cli -g $ cnpm install webpack-dev-server -g 配置 webpack为了方便，以下 新建 webpack.config.js 并添加以下内容 const path = require('path');
module.exports = {
// index.js是入口文件
entry: path.resolve(__dirname,'./index.js'),output: {
path: path.resolve(__dirname,''),filename: "./bundle.js"
},mode: 'development',// ip 和端口配置
devServer: {
host: "127.0.0.1",port: 8080
},module: {
rules: [
{
test: /.js$/,exclude: /node_modules/,loader: "babel-loader",options: {
presets: ["env","react"]
}
}
]
}
};
这个 创建测试文件
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>我的第一个react例子</h1>,document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>example</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
启动最后执行 附上我的 package.json 文件，直接执行 {
"name": "","version": "1.0.0","description": "","main": "index.js","scripts": {
"start": "webpack-dev-server","keywords": [],"author": "","license": "ISC","dependencies": {
"react": "^16.3.1","react-dom": "^16.3.1"
},"devDependencies": {
"babel-loader": "^7.1.4","babel-preset-env": "^1.6.1","babel-preset-react": "^6.24.1","webpack": "^4.5.0","webpack-cli": "^2.0.14","webpack-dev-server": "^3.1.3"
}
}
如果要换端口的话，修改下 用 Parcel 开始第一个 React初始化一个 json 配置文件$ npm init -y 在 "scripts": {
"start": "parcel index.html",
parcel 是运行 html 文件的，而不是 js。 安装 React$ cnpm install react react-dom --save 安装编译工具 babel$ cnpm install babel-preset-env babel-preset-react babel-core --save-dev 安装打包工具 Parcel全局的和当前文件夹的最好都装上。 $ cnpm install parcel-bundler --save-dev $ cnpm install -g parcel-bundler 配置 babel为了方便，以下 新建文件 .babelrc ，添加以下内容： {
"presets": ["env"]
}
这里面只添加 env 即可，如果添加了 react 就会报错。 创建测试文件
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>我的第一个react例子</h1>,document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>example</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
启动最后执行 附上我的 package.json 文件，直接执行 {
"name": "","scripts": {
"start": "parcel index.html","devDependencies": {
"babel-core": "^6.26.0","parcel-bundler": "^1.7.0"
}
}
可以看出来，用 parcel 跟 webpack 刷新内容的方式也不一样，parcel 并没有重新加载网页。
如果要改端口的话，启动命令需要改成：
总结本文分别展示了 如何用 webpack 和 Parcel 搭建第一个 ReactApp，虽然部分内容有重复，但你可以清晰地看到它们之间的差别。 相对于 webpack 来说 parcel 在启动之更新内容是不重新加载网页的，只刷新更改的内容，速度比 webpack 快很多。 同时，parcel 也脱离了配置文件，使用非常方便，但这既是优点也是缺点，没有配置文件在功能上可能没有 webpack 那么强大，但是对于学习 react 来说足够了。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |