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

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的图片

• 编辑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);

• 启动服务，打开浏览器，查看效果如下：
  
  红色的网页背景，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);

浏览器效果展示如下：

通过上面的预览效果，说明我们文件读取的最终一个预览效果，说明我们buffer文件引入是没问题的 ~

转载：https://blog.csdn.net/WU5229485/article/details/101701148