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



  • 一想到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/


Log in to reply