本文是构造 UI 轮子过程中搭建项目初始化时使用 Parcel 作为打包器的简要使用记录。

安装

参考 官方文档

使用 npm 进行 parcel-bundler 的安装。

npm i -D parcel-bundler

为什么要用 -D ? 如果一个 npm 包是给用户使用的,不用加 -D。如果是给开发者使用,需要加 -D。(或者全局安装)

 

打包

安装完成之后,需要进行打包的操作。

使用下列命令进行 parcel 的初次打包,如果出现红色报错,就在后面加上 index.html即可。

./node_modules/.bin/parcel
 

注意: 这里还需要注意的问题的是,初次进入之后。还需要给 package.json 进行配置。因为是 runtime-only 模式,所以会出现下列报错。

 
 

配置完毕后,还是使用 ./node_modules/.bin/parcel index.html 进行打包编译,或者使用,效果是一样的。

npx parcel index.html
 

清除缓存

建议先清除第一次编译失败的缓存。或者在末尾使用 --no-cache

rm -rf .cache
 

Parcel 打包器简单使用记录的更多相关文章

  1. webpack打包器简单入门

    概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...

  2. UnityShader 表面着色器简单例程集合

    0.前言 这些简单的shader程序都是写于2015年的暑假.当时实验室空调坏了,30多个人在实验室中挥汗如雨,闷热中学习shader的日子还历历在目.这些文章闲置在我个人博客中,一年将过,师弟也到了 ...

  3. 【Python】装饰器实现日志记录

    好的日志对一个软件的重要性是显而易见的.如果函数的入口都要写一行代码来记录日志,这种方式实在是太低效了,但一直没有找到更好的方法.后来用python写一些软件,了解到python的装饰器功能时,突然人 ...

  4. Quick-Cocos2d-x Lua脚本加密打包器

    准备开新项目了,在寻找合适的框架,后来就发现了Quick-Cocos2d-x这玩意. 别说,还挺好使.之后一步步研究,发现Lua不加密是不行的. 加密的方法在这里. 因为在做版本更新的时候,一般大家都 ...

  5. 如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读<<黑客与画家>> 有感

    上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...

  6. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  7. Python简单爬虫记录

    为了避免自己忘了Python的爬虫相关知识和流程,下面简单的记录一下爬虫的基本要求和编程问题!! 简单了解了一下,爬虫的方法很多,我简单的使用了已经做好的库requests来获取网页信息和Beauti ...

  8. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  9. redis5.0.3单实例简单安装记录

    redis5.0.3单实例简单安装记录 日常需要测试使用,索性记录下来,免得临时又麻烦的找资料. yum -y install make gcc-c++ cmake bison-devel ncurs ...

随机推荐

  1. spring boot 输入参数统一校验

    1 引入spring boot validate    maven 依赖 <!-- 验证 --> <dependency> <groupId>org.hiberna ...

  2. .Net core 使用NPOI 直接导入Excel到数据库(即不先将Excel保存到服务器再读取文件到数据库)

    /// <summary> /// 导入信息 /// </summary> /// <param name="file"></param& ...

  3. JS知识点整理(二)

    前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...

  4. android学习:Android上面部署Apache FTPServer

    经过了几天的研究,终于Apache FTPServer在Android的配置和使用上有了一些心得,现在分享出来,提供给大家参考,说到这儿又不得不吐槽一下这要命的转载了,找Apache FTPServe ...

  5. JAVA项目服务器部署

    1.下载 Java JDK 搜索jdk下载,然后进入JAVA官方网站jdk下载页,选择自己的对应的操作系统,点击下载 https://www.oracle.com/technetwork/java/j ...

  6. Android Studio 2.3.3 出现Error:(26.13) Fail to resole: com.android.support.appcompat永久解决方法

    Android Studio 出现Error(26.13):Fail to resole:com.android.support.appcompat-v7.28_ Install Repository ...

  7. 记录一下自己用jQuery写的轮播图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 网页中的图像<img>

    插入图像 img标记的属性及描述 属性 值 描述 alt text 定义有关图形的短描述 src URL 要显示图像的URL height pixels% 定义图像的高度 width pixels% ...

  9. 初识spark

    一. spark 概述 1.是什么: ​ Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎.2012年,它是由加州伯克利大学AMP实 验室开源的类 Hadoop MapRedu ...

  10. Vivado 调用自定义IP核

    关于Vivado如何创建自定义IP核有大量的参考文章,这里就不多加阐述了,本文目的主要是解决如何在新建工程中引用其它工程已经自定义封装好的IP核,从而实现自定义IP核的灵活复用. 举个例子,我们的目标 ...