使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/...
0. 新建目录mkdir react-helloworld cd react-helloworld1. 初始化 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 文件
内容
7. 新建 index.js 文件
import React from "react"; import ReactDOM from "react-dom"; const App = () => { return8. 添加打包命令Hello World!
; }; ReactDOM.render(, document.getElementById("root"));
{ "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/...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112831.html
使用 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 文件,文件内容: ...
摘要:一个基于打包工具的急速开发脚手架解决方案强烈建议使用以上项目地址初始化项目安装依赖其中是主要的工具,对于结尾的单文件,需要单独处理文件类型,这个插件会通过来生成对应的代码,会自动加载开头的依赖。 parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/p....
摘要:前言是前端最受欢迎的框架之一,解读其源码的文章非常多,但是我想从另一个角度去解读从零开始实现一个,从层面实现的大部分功能,在这个过程中去探索为什么有虚拟为什么这样设计等问题。 前言 React是前端最受欢迎的框架之一,解读其源码的文章非常多,但是我想从另一个角度去解读React:从零开始实现一个React,从API层面实现React的大部分功能,在这个过程中去探索为什么有虚拟DOM、d...
摘要:接下来来看一段代码示例语法与语言比较当类型不对的时候,会提示错误编译后语法联想大致可以把它看成是加了类型系统的。 一篇文章学会 TypeScript (内部分享标题:TypeScript 基础) 这篇文章是我在公司前端小组内部的演讲分享稿,目的是教会大家使用 TypeScript,这篇文章虽然标着基础,但我指的基础是学完后就能够胜任 TypeScript 的开发工作。从我分享完的效果来...
阅读 2521·2021-10-11 10:58
阅读 962·2019-08-29 13:58
阅读 1630·2019-08-26 13:32
阅读 797·2019-08-26 10:40
阅读 3215·2019-08-26 10:18
阅读 1740·2019-08-23 14:18
阅读 1081·2019-08-23 10:54
阅读 414·2019-08-22 18:39