零配置 JS 打包工具 Parcel 初体验

最新推荐文章于 2024-02-02 11:12:29 发布

justjava_c

最新推荐文章于 2024-02-02 11:12:29 发布

阅读量792

点赞数

本文链接：https://blog.csdn.net/vCa54Lu0KV27w8ZZBd/article/details/78956627

版权

Parcel 是一个新的 JavaScript 打包工具，其特点是零配置、速度快。

今天使用 Parcel 打包了一个 React 的 HelloWorld 应用，记录一下开发过程。

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",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
-  "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",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "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",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "react": "^16.2.0",
     "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",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "parcel index.html"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
    },
    "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

justjava_c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零配置 JS 打包工具 Parcel 初体验

Parcel 是一个新的 JavaScript 打包工具，其特点是零配置、速度快。今天使用 Parcel 打包了一个 React 的 HelloWorld 应用，记录一下开发过程。0. 新建目录mkdir react-helloworldcd react-helloworld1. 初始化 npmyarn init -y或npm init -y此时会创建要给 package.json 文件，文件内容
复制链接

扫一扫