内容简介:本篇博客内容来自视频 https://www.youtube.com/watch?v=8rD9amRSOQYParcel官网:https://parceljs.org/在官网上描述上写到:
本篇博客内容来自视频 https://www.youtube.com/watch?v=8rD9amRSOQY
Parcel官网:https://parceljs.org/
在官网上描述上写到: Blazing fast, zero configuration web application bundler
其它的单词我不认识,这个 zero configuration
引起了我的注意
写在前面
现在用react, vue, angular开发前端项目都有他们相应的脚手架,或者 cli
也都可以做到一键创建项目,不过 parcel 号称 0配置,我跟着视频尝试写了一下,确实0配置,非常的简单,总结一下,以后说不写啥时候能用的上
创建项目(添加依赖)
简单的nodejs项目即可,使用 npm init
初始化项目,生成一个 package.json
文件
然后安装依赖
npm i -D parcel-bundler sass @babel/core @babel/plugin-transform-runtime @babel/runtime-corejs2
说明:项目中要使用高阶js语法,所以还是要借助babel编译,sass是方便写样式的,主要还是 parcel-bundler
安装成功后,就可以创建对应的项目结构了,类似于 create-react-app 初始化的项目一样,有 public
src
在public文件夹下添加上 index.html
文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My App</title> </head> <body> <h1>Hello world</h1> <script src="../src/app.js"></script> </body> </html>
引入了一个 src/app.js
文件,创建它
console.log("hello world");
修改 package.json
文件里的命令
文接链原: https://tomoya92.github.io/2020/04/17/parcel-tutorial/
"scripts": { "dev": "rm -rf ./development && rm -rf ./.cache && parcel public/index.html --out-dir development -p 3000", "build": "parcel build public/index.html --out-dir dist --public-url ./" },
最后添加babel的配置,在项目根目录里创建文件 .babelrc
,添加上下面内容
{ "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2, "regenerator": true } ] ] }
运行项目 npm run dev
浏览器访问 http://localhost:3000
添加组件
首先给页面上添加一个Header,创建Header组件
src/components/Header.js
const Header = () => { const template = ` <header> <h1>My Parcel App</h1> <p>This is a boilerplate for a simple JS workflow using parcel</p> </header> `; return template; } export default Header;
修改index.html
<body> <div> <div id="header"></div> <div id="user"></div> </div> <script src="../src/app.js"></script> </body>
添加样式 src/scss/app.scss
$primary-color: slateblue; * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; background: $primary-color; color: #ffffff; line-height: 1.5; } ul { list-style: none; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } header { text-align: center; margin-bottom: 40px; background: rgba(0,0,0,0.3); padding: 30px; border-bottom: 5px #fff solid; }
修改 app.js
链文接原: https://tomoya92.github.io/2020/04/17/parcel-tutorial/
import './scss/app.scss'; import Header from './components/Header'; const app = async () => { document.getElementById("header").innerHTML = Header(); } app();
刷新页面可以看到
下面来添加User组件
介绍一个随机生机用户信息的开放接口 https://randomuser.me/api
要请求接口,安装 axios
npm i axios
创建组件 src/components/User.js
import axios from 'axios'; const User = async () => { const res = await axios.get('https://randomuser.me/api') const user = res.data.results[0]; const template = ` <div> <img src="${user.picture.large}"/> <div> <h1>${user.name.first} ${user.name.last}</h1> <ul> <li>${user.email}</li> <li>${user.phone}</li> <li>${user.location.city}</li> </ul> </div> </div> `; return template; } export default User;
修改 app.js,将User组件引入进来并加载到页面上
import './scss/app.scss'; import Header from './components/Header'; import User from './components/User'; const app = async () => { document.getElementById("header").innerHTML = Header(); document.getElementById("user").innerHTML = await User(); } app();
最后再添加上相应的css src/scss/_card.scss
.card { display: flex; flex-direction: column; color: #333; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background: #fff; border-radius: 20px; overflow: hidden; img { width: 100%; object-fit: cover; } .card-body { padding: 30px; h1 { margin-bottom: 10px; } li { line-height: 2; border-bottom: #ccc solid 1px; } li:last-child { border: 0; } } }
将 _card.scss 引入到 app.scss 里让其生效 放在app.scss内容的最上面
@import "./card";
再次刷新页面
打包
npm run build
运行命令后,会在 dist 文件夹里生成对应的静态文件,使用nginx部署一下即可访问了
总结
parcel开发SPA(single-page application)确实非常方便的,不知道有没有好用的前端路由组件,如果有的话,配合着一块使用,应该会非常的方便
原文链接:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端面试之组件化
- 前端组件化演进之路
- 吐槽前端组件化的踩坑之路
- 关于前端组件化、状态管理规范化的思考
- 从 Web Components 到 React 谈前端组件化
- 已配置 4000+ 页面,携程前端组件化探索之“乐高”运营系统
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
高效程序员的45个习惯
Venkat Subramaniam、Andy Hunt / 钱安川、郑柯 / 人民邮电出版社 / 2010-01 / 35.00元
“书中‘切身感受’的内容非常有价值——通过它我们可以做到学有所思,思有所悟,悟有所行。” ——Nathaniel T. Schutta,《Ajax基础教程》作者 “此书通过常理和经验,阐述了为什么你应该在项目中使用敏捷方法。最难得的是,这些行之有效的实战经验,竟然从一本书中得到了。” ——Matthew Johnson,软件工程师 十年来,软件行业发生了翻天覆地的变化。敏捷......一起来看看 《高效程序员的45个习惯》 这本书的介绍吧!