如何通过Parcel将.txt文件导入JS并生成DOM元素？

一、客户端渲染解决导入报错问题 #

Parcel默认没有处理TXT文件的转换器，导致出现@parcel/core: No transformers found for data.txt.报错，可通过以下两种方式解决：

1. 直接使用raw loader导入 #

修改导入语句，在路径前添加raw!前缀，强制Parcel用raw转换器读取文件内容为字符串：

import data from "raw!./data.txt";

const quotesContainer = document.querySelector('.quotes');
// 拆分内容并过滤空行
const lines = data.split('\n').filter(line => line.trim() !== '');

lines.forEach(line => {
  const pElement = document.createElement('p');
  pElement.textContent = line;
  quotesContainer.appendChild(pElement);
});

2. 全局配置TXT文件转换器（Parcel 2） #

如果需要批量处理TXT文件，可安装专用转换器并配置Parcel：

• 安装依赖：

npm install @parcel/transformer-raw --save-dev

• 在项目根目录创建.parcelrc文件，添加配置：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.txt": ["@parcel/transformer-raw"]
  }
}

之后即可正常导入TXT文件，补充DOM操作逻辑即可：

import data from "./data.txt";

const quotesContainer = document.querySelector('.quotes');
const lines = data.split('\n').filter(line => line.trim() !== '');

for (const line of lines) {
  const pElement = document.createElement('p');
  pElement.textContent = line;
  quotesContainer.appendChild(pElement);
}

二、避免客户端渲染的静态生成方案 #

如果不想在客户端执行JS渲染DOM，可以在构建阶段直接将TXT内容注入到HTML中，步骤如下：

1. 创建Node.js脚本generate-quotes.js，用于读取TXT并生成HTML片段：

const fs = require('fs');
const path = require('path');

// 读取data.txt内容
const txtContent = fs.readFileSync(path.resolve(__dirname, 'data.txt'), 'utf8');
// 生成名言的p标签列表，过滤空行
const quoteElements = txtContent
  .split('\n')
  .filter(line => line.trim() !== '')
  .map(line => `<p>${line}</p>`)
  .join('');

// 读取目标HTML文件
let htmlContent = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf8');
// 将生成的标签插入到.quotes容器中
htmlContent = htmlContent.replace(
  '<div class="quotes"></div>',
  `<div class="quotes">${quoteElements}</div>`
);

// 写入修改后的HTML
fs.writeFileSync(path.resolve(__dirname, 'index.html'), htmlContent);

2. 在package.json的scripts中添加预构建命令：

{
  "scripts": {
    "prebuild": "node generate-quotes.js",
    "build": "parcel build index.html"
  }
}

执行npm run build时，脚本会自动将TXT中的名言静态插入到HTML的.quotes容器里，最终生成的HTML无需客户端JS即可直接展示内容。

内容的提问来源于stack exchange，提问作者Tristan F.-R.