摘要:是什么极速零配置应用打包工具说到打包工具,大多人应该都用过,也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下,修改文件内容并不会实时更改页面效果,内部引入时无此问题。
Parcel是什么?
极速零配置Web应用打包工具
说到打包工具,大多人应该都用过Webpack,Parcel也是这一类工具。
Parcel相比Webpack有什么优势?配置简单
打包速度快
以下是本人体验过程使用npm安装Parcel
$ npm install -g parcel-bundler
新建index.html index.js style-in-html.css style-in-js.css sass.scss
Style in HTML
Style in Js
Sass
// 以下是index.js文件内容 console.log("Hello Parcel");
/* 以下是style-in-html.css文件内容 */ p { color: red; }
命令行运行
parcel index.html
游览器打开http://localhost:1234,效果如图
直接修改style-in-html.css文件内容
p { color: red; background-color: green; }
游览器依旧如上图,手动使用F5刷新后样式才生效,可以确定监听到了文件变更,并进行了编译,但是未通知游览器进行响应,或者此处游览器并未正确响应。这里结合文件命名你应该知道为什么会有两个css文件了。
直接上结论在HTML内部引用css的情况下,修改css文件内容并不会实时更改页面效果,Js内部引入时无此问题。
编译Sass只需要安装node-sass即可在Js文件里面引用*.scss文件。注意:*.scss并不能像*.css文件一样直接在HTML里面引用,必须在Js里面引用
npm install --save-dev node-sass
// 以下是sass.scss文件内容 div { span { font-size: 80px; color: skyblue; } }
// 在index.js文件里面引用sass.scss文件 import "./sass.scss";
效果如图
使用TypeScript很方便,无需任何配置,直接引用*.ts文件即可。
最后如果有哪里不对的欢迎指正。想了解更多关于Parcel的可以去官网
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51724.html
摘要:是什么极速零配置应用打包工具说到打包工具,大多人应该都用过,也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下,修改文件内容并不会实时更改页面效果,内部引入时无此问题。 Parcel是什么? 极速零配置Web应用打包工具 说到打包工具,大多人应该都用过Webpack,Parcel也是这一类工具。 Parcel相比Webpack有什么优势? 配...
摘要:是什么极速零配置应用打包工具说到打包工具,大多人应该都用过,也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下,修改文件内容并不会实时更改页面效果,内部引入时无此问题。 Parcel是什么? 极速零配置Web应用打包工具 说到打包工具,大多人应该都用过Webpack,Parcel也是这一类工具。 Parcel相比Webpack有什么优势? 配...
摘要:年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。自从谷歌提出后,就持续的获得了业界的关注,热度可见一斑。就在今年,谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家...
摘要:年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。自从谷歌提出后,就持续的获得了业界的关注,热度可见一斑。就在今年,谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家...
摘要:个人感悟自己公司也有项目在用,学的难点在于,其他的话上手挺快的,而且是尤大写的,中文文档也很完整,很适合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 当红辣子鸡——vue 和去年一样,vue是js项目中点赞数增加最多的,我们可以看下图: showImg(https://se...
阅读 924·2021-11-22 09:34
阅读 2136·2021-11-11 16:54
阅读 2165·2021-09-27 14:00
阅读 910·2019-08-30 15:55
阅读 1498·2019-08-29 12:46
阅读 571·2019-08-26 18:42
阅读 605·2019-08-26 13:31
阅读 3152·2019-08-26 11:52