parcel js/css/图片/文件等资源打包构建总结

浅浅的花香味﹌ 2023-08-17 16:50 140阅读 0赞

## `Parcel` js/css/图片/文件等资源打包构建总结 ##

本章节呢，大喵将带着大家，使用`parcel`分别对JS还有其他资源进行打包测试，让大家了解`parcel`是如何方便快捷开箱即用打包构建的 ~

### 1. Javascript parcel 打包 ###

javascript打包是前端开发中最常用的打包，本章节内容呢，将使用parcel来打包 `CommonJS` 和 `ES6` 、`import()` 的JS模块

*  我们首先使用`CommonJS`的方式进行引入

// 使用 CommonJS 语法导入模块
    const lod = require('lodash')
    console.log(lod.VERSION)

*  接着我们使用`ES6`的方式引入：

import lod2 from 'lodash'
    console.log(lod2.VERSION)

*  最后我们使用`import`动态导入的方式引入：

import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js').then(() => {
        
      console.log(_.VERSION)
    })

*  我们在控制台打印一下

npx parcel index.html
    Server running at http://localhost:1234
    √  Built in 4.74s.

*  我们去到浏览器控制台，观察打印结果如下：

4.17.15
    4.17.15
    4.17.11

*  说明使用`parcel`模块化打包我们JS的这几种规范都是没有什么问题的

### 2. 其他Web资源 parcel打包 ###

接着，我们使用parcel来打包我们在项目中引入的的`css`, 图片, 文件等资源

*  新建`test.css`，编写如下：

html,body{width:100%;height:100%;}
    body{background-color: red;}

*  新建`some.html`，编辑如下：

<section>
    	some.html section box
    </section>

*  新建一张`test.png`的图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70]

*  编辑`index.js`如下：

// 导入一个css文件
    import './test.css'
    
    // 导入包含 CSS 模块的 CSS 文件
    import classNames from './test.css'
    
    // 以 URL 的形式引入图片
    import imageURL from './test.png'
    let img = document.createElement('img');
    img.src = imageURL;
    document.body.append(img);
    
    // 导入一个html文件
    import('./some.html')
    // 或:
    import html from './some.html'
    // 或:
    require('./some.html')
    
    // 写入 box
    let iframe = document.createElement('div');
    iframe.innerHTML = html;
    document.body.append(iframe);

*  启动服务，打开浏览器，查看效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 1]  
    红色的网页背景，`parcel`图片，`some.html section box`的模块，说明我们的资源模块已经打包完毕，没有任何问题

### 3. `base64`图片资源引入 ###

在某些情况下，我们需要直接读取文件信息，所以就需要使用`base64`来丰富我们的图片资源引用，那我们该如何操作呢，`index.js` 编辑如下所示：

// 以字符串的形式读取内容
    const string = fs.readFileSync(__dirname + '/test.txt', 'utf8')
    console.log(string)
    
    // 以 Buffer 的形式读取内容
    const buffer = fs.readFileSync(__dirname + '/test.png')
    
    // 转换Buffer格式到图片
    let img = document.createElement('img');
    img.src = `data:image/png;base64,${
          buffer.toString('base64')}`;
    document.body.append(img);

浏览器效果展示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 2]  
通过上面的预览效果，说明我们文件读取的最终一个预览效果，说明我们`buffer`文件引入是没问题的 ~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70]: /images/20230809/85feaed1b7de4243888ff2ca3c2d2926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 1]: /images/20230809/1d6658da05e24a819c6e4cbffcf57915.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 2]: /images/20230809/402630a7db3e49ce8d98c88c43a5113c.png