资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Parcel上手——又一个打包工具

Parcel上手——又一个打包工具

cyqian / 634人阅读

摘要：是什么极速零配置应用打包工具说到打包工具，大多人应该都用过，也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下，修改文件内容并不会实时更改页面效果，内部引入时无此问题。

Parcel是什么？ 
</>复制代码 
  1. 极速零配置Web应用打包工具

说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。

Parcel相比Webpack有什么优势？

配置简单

打包速度快

以下是本人体验过程

使用npm安装Parcel

</>复制代码 
  1. $ npm install -g parcel-bundler

新建index.html index.js style-in-html.css style-in-js.css sass.scss

</>复制代码 
  4.     
    Style in HTML
  5.     
    Style in Js
  6.     
  7.         Sass
  8.     
  9.     
  10.     
  11.     
</>复制代码 
  1. // 以下是index.js文件内容
  2. console.log("Hello Parcel");
</>复制代码 
  1. /* 以下是style-in-html.css文件内容 */
  2. p {
  3.     color: red;
  4. }

命令行运行

</>复制代码 
  1. parcel index.html

游览器打开http://localhost:1234，效果如图

直接修改style-in-html.css文件内容

</>复制代码 
  1. p {
  2.     color: red;
  3.     background-color: green;
  4. }

游览器依旧如上图,手动使用F5刷新后样式才生效，可以确定监听到了文件变更，并进行了编译，但是未通知游览器进行响应，或者此处游览器并未正确响应。这里结合文件命名你应该知道为什么会有两个css文件了。

直接上结论 
</>复制代码 
  1. 在HTML内部引用css的情况下，修改css文件内容并不会实时更改页面效果，Js内部引入时无此问题。

编译Sass只需要安装node-sass即可在Js文件里面引用*.scss文件。注意：*.scss并不能像*.css文件一样直接在HTML里面引用，必须在Js里面引用

</>复制代码 
  1. npm install --save-dev node-sass
</>复制代码 
  1. // 以下是sass.scss文件内容
  2. div {
  3.     span {
  4.         font-size: 80px;
  5.         color: skyblue;
  6.     }
  7. }
</>复制代码 
  1. // 在index.js文件里面引用sass.scss文件
  2. import "./sass.scss";

效果如图

使用TypeScript很方便，无需任何配置，直接引用*.ts文件即可。

最后

如果有哪里不对的欢迎指正。想了解更多关于Parcel的可以去官网

GPU云服务器 云服务器 又一个典型实例 php项目又什么工具 打包工具 python打包工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92656.html

相关文章

  • Parcel上手——又一个打包工具

    摘要：是什么极速零配置应用打包工具说到打包工具，大多人应该都用过，也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下，修改文件内容并不会实时更改页面效果，内部引入时无此问题。 Parcel是什么？ 极速零配置Web应用打包工具 说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。 Parcel相比Webpack有什么优势？ 配...

    Dr_Noooo 评论0 收藏0

  • Parcel上手——又一个打包工具

    摘要：是什么极速零配置应用打包工具说到打包工具，大多人应该都用过，也是这一类工具。这里结合文件命名你应该知道为什么会有两个文件了。直接上结论在内部引用的情况下，修改文件内容并不会实时更改页面效果，内部引入时无此问题。 Parcel是什么？ 极速零配置Web应用打包工具 说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。 Parcel相比Webpack有什么优势？ 配...

    printempw 评论0 收藏0

  • 2018前端值得关注的技术

    摘要：年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。自从谷歌提出后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家...

    xiao7cn 评论0 收藏0

  • 2018前端值得关注的技术

    摘要：年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。自从谷歌提出后，就持续的获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家...

    用户84 评论0 收藏0

  • 汇总2017JS项目，总结我们从中学到了什么？

    摘要：个人感悟自己公司也有项目在用，学的难点在于，其他的话上手挺快的，而且是尤大写的，中文文档也很完整，很适合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 当红辣子鸡——vue 和去年一样，vue是js项目中点赞数增加最多的，我们可以看下图： showImg(https://se...

    dantezhao 评论0 收藏0

发表评论

登陆后可评论

0条评论

cyqian

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<