Parcel 打包示例(React HelloWorld)


Posted in Javascript onJanuary 16, 2018

Parcel 打包特点

极速打包时间

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。

 将你所有的资源打包

Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。

自动转换

如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

配置代码分拆

使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码。

 热模块替换

Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

友好的错误日志

当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。

使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/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

GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 #Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 #Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 #Javascript
解析Angular 2+ 样式绑定方式
Jan 15 #Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 #Javascript
You might like
ThinkPHP中数据操作案例分析
2015/09/27 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python实现QQ批量登录功能
2019/06/19 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
乡镇党委书记个人整改措施
2014/09/15 职场文书
教师培训学习心得体会
2016/01/21 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python