Navigation

    云、贵、川、渝IT人的圈子
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 招聘
    • 活动
    • 项目

    新的打包工具之PACEL, webpack之外的首选打包工具

    开源推荐
    pacel webpack
    1
    1
    41
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • polang20599
      polang20599 last edited by admin

      一想到webpack,我们可能联想到的就是打包功能强大,配置丰富,插件多功能全
      但实际开发项目中,除了大型项目外,一些小的比较敏捷的项目,如果搭配上webpack这一套,会让人感觉,项目有点重,难配置,这个时候你应该了解一下 PACEL这个工具

      91dfa7da-0222-4741-926f-2cd0534212b8-image.png

      pacle是github上接触老外的一个项目,发现打包的时候并没有用 webpack,也没用gulp 和 grant这一类的构建工具,而是用pacle这个东西打包的,安装依赖试上手,确实比webpack方便不少
      上个简单的示例

      Hello World

      先从你应用的入口 HTML 文件开始。Parcel 跟随着文件的依赖去构建你的整个应用。

      ✏️index.html

      <html>
      <body>
        <script src="./index.js"></script>
      </body>
      </html>
      

      🛠 index.js

      // 导入另一个组件
      import main from './main';
      
      main();
      

      🛠 main.js

      // 导入一个 CSS 模块
      import classes from './main.css';
      
      export default () => {
        console.log(classes.main);
      };
      

      💅 main.css

      .main {
        /* 引用一张图片 */
        background: url('./images/background.png');
        color: red;
      }
      

      只需要运行 parcel index.html 去启动一个开发服务器。导入 JavaScript, CSS, images, 和更多的资源,然后便大功告成! 👌

      从这个上面可以看出,咱们无需做配置,只要运行 parcel 然后找到指定的入口页面即可,这个操作大大的方便了日常一些敏捷的小项目开发,大家可以试试

      PACLE 中文网

      https://zh.parceljs.org/

      1 Reply Last reply Reply Quote 0
      • First post
        Last post
      8
      玻
      U
      A
      大
      A
      黑
      低
      天
      白
      快
      爱
      白
      美
      此
      荒
      为
      哭
      柳
      无
      真

      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      • 云南北大青鸟
      ©2019-2020 滇ICP备20006698号