Parcel 打包示例 - React HelloWorld

发布时间：2020-12-15 06:38:25 所属栏目：百科来源：网络整理

导读：使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/... 0. 新建目录 mkdir react-helloworldcd react-helloworld 1. 初始化 npm yarn init -y 或 npm init -y 此时会创建要给 package.json 文件，文件内容： { "name":

使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/...

0. 新建目录

mkdir react-helloworld
cd react-helloworld

1. 初始化 npm

yarn init -y

或

npm init -y

此时会创建要给 package.json 文件，文件内容：

{
  "name": "parcel-example-react-helloworld","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },"keywords": [],"author": "","license": "ISC"
}

2. 添加 React

yarn：

yarn add react react-dom

npm:

npm install react react-dom --save

package.json 文件内容：

{
   "name": "parcel-example-react-helloworld","scripts": {
     "test": "echo "Error: no test specified" && exit 1"
   },-  "license": "ISC"
+  "license": "ISC",+  "dependencies": {
+    "react": "^16.2.0",+    "react-dom": "^16.2.0"
+  }
 }

3. 添加 Babel

新建 .babelrc 文件

touch .babelrc

输入内容：

{
  "presets": ["react"]
}

添加 babel-preset-react：

yarn：

yarn add babel-preset-react -D

npm:

npm install babel-preset-react --D

此时 package.json 文件内容：

{
   "name": "parcel-example-react-helloworld","license": "ISC","dependencies": {
     "react": "^16.2.0","react-dom": "^16.2.0"
-   }
+   },+   "devDependencies": {
+     "babel-preset-react": "^6.24.1"
+   }
 }

5. 添加 Parcel

yarn：

yarn add parcel-bundler -D

npm:

npm install parcel-bundler --D

此时 package.json 文件内容：

{
   "name": "parcel-example-react-helloworld","react-dom": "^16.2.0"
    },"devDependencies": {
-      "babel-preset-react": "^6.24.1"
+      "babel-preset-react": "^6.24.1",+      "parcel-bundler": "^1.0.3"    
    }
 }

6. 新建 index.html 文件

内容

<html>

<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>

</html>

7. 新建 index.js 文件

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello World!</h1>;
};

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

8. 添加打包命令

{
   "name": "parcel-example-react-helloworld","scripts": {
-    "test": "echo "Error: no test specified" && exit 1"
+    "start": "parcel index.html"
   },"devDependencies": {
       "babel-preset-react": "^6.24.1"
       "babel-preset-react": "^6.24.1","parcel-bundler": "^1.0.3"    
    }
 }

9. 完成

运行

yarn start

或

npm start

在浏览器中打开 http://localhost:1234

打包过程会生产 .cache 和 dist 两个目录，如果是 git 工程，可以新建 .gitignore 文件忽略这两个目录：

.cache
dist
node_modules

GitHub 地址: https://github.com/justjavac/...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!