Parcel

作者: 谢大见 | 来源:发表于2018-03-26 16:55 被阅读0次

    虽然 webpack 带来了许多可配置性,同事也造就了它的复杂性。 而 Parcel 带来简单性。 官方号称 Parcel 为 “零配置” ,开箱即用。

    • Parcel 支持 JS、CSS、HTML、资源文件等等 – 无需插件 – 更加便于用户使用。
    • 零配置。开箱即用的代码拆分,模块热替换,CSS 预处理器,开发服务器,缓存等等;
    • 更加友好的错误日志。

    安装 Parcel :

    Yarn:

    yarn global add parcel-bundler
    

    npm:

    npm install -g parcel-bundler
    

    使用以下命令在你的项目目录中创建一个 package.json 文件:

    yarn init -y
    

    or

    npm init -y
    

    Parcel 可以将任何类型的文件作为 入口点(entry point) ,但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中,Parcel 也会为你处理,并将该引用替换为输出文件的 URL

    小型项目神器

    创建一个 index.html 和 index.js 文件。

    //index.html
    <html>
    <body>
      <script src="./index.js"></script>
    </body>
    </html>
    
    //index.js 
    console.log("hello world");
    

    Parcel 内置了一个开发服务器,这会在你更改文件时自动重建你的应用程序,并支持 模块热替换 ,以便你快速开发。你只需指定 入口文件 即可:

    parcel index.html
    

    现在在你浏览器中打开 http://localhost:1234/ 。 您也可以使用 -p <port number> 选项覆盖默认端口。

    如果您没有自己的服务器,或者你的应用完全是客户端渲染的,那么请使用开发服务器。如果你有自己的服务器,您可以在 watch 模式下运行 Parcel 。这样在文件更改时,Parcel 仍然会自动重建文件,并支持模块热替换,但不启动 Web 服务器。

    parcel watch index.html
    

    当您准备为生产构建时,build 模式会关闭监视,并且只会构建一次。

    相关文章

      网友评论

          本文标题:Parcel

          本文链接:https://www.haomeiwen.com/subject/yxacqftx.html