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 相关文章推荐
探寻Javascript执行效率问题
Nov 12 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Javascript中的async awai的用法
May 17 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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
php变量作用域的深入解析
2013/06/03 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
vue router demo详解
2017/10/13 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Django工程的分层结构详解
2019/07/18 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python爬取youtube视频的示例代码
2021/03/03 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
Oracle性能调优原则
2012/05/03 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
临床护理求职信
2014/04/26 职场文书
优秀语文教师事迹
2014/05/18 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL