zoukankan      html  css  js  c++  java
  • Parcel 入门 (一)

      Parcel 是一个Web应用程序打包器(bundler),与以往的开发人员使用的打包器不同。它利用多核处理提供极快的性能,并且不需要进行任何配置。

    安装

    Yarn:

    yarn global add parcel-bundler
    Npm:
    npm install -g parcel-bundler
    二、 创建package.json文件;

    Yarn:
    yarn init -y
    npm:
    npm init -y
    三、 启动 
      Parcel可以将任何类型的文件作为入口点,但是HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主javaScript文件链接到HTML中,Parcel也会为你处理,并
    将该引用替换为输出文件的URL。

    创建一个index.html 和 index.js 文件。
    index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title>Parcel 入门</title>
    </head>
    <body>
        <script type="text/javascript" src="./index.js"></script>
    </body>
    </html>
    index.js
    alert('Hello, world!');
    1. Parcel 内置了一个开发服务器,在你更改文件时自动重建你的应用程序,并支持模块热替换,以便快速开发。你只需指定入口文件即可:
    parcel index.html

     运行成结果为:

    已经启动成功。在浏览器中打开http://localhost:1234,会出现弹框。

        2.  你也可以使用-p <port number>选择覆盖默认接口。

    parcel index.html -p 2345

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

      

    parcel watch index.html



  • 相关阅读:
    自定义swiper索引值的样式
    返回上一页面后页面后自动刷新(跨域也可)
    点击跳转到页面指定位置
    移动端输入框弹起影响布局(包括fixed布局情况)
    thinkPHP5模版页面volist循环offset使用
    Vue i18n国际化在实际项目中的使用
    前端Cookie、essionStorage、LocalStorage 的区别
    前端常用的一些浏览器对象
    前端取?后面的值
    前端下载文件重命名解决
  • 原文地址:https://www.cnblogs.com/slovey/p/9212327.html
Copyright © 2011-2022 走看看