babel-plugin-named-asset-import 是做什么的

Question

好吧，我到处找了，没有关于这个 Babel 模块的文档 --babel-plugin-named-asset-import

谁能解释一下它的用途和工作原理。

Answer 1

看起来它的目的是 import named exports 来自非 JS/CSS 资产。目前，在 CRA 中，它似乎只针对svg assets 实施。目标是提供另一种将 SVG 导入为 React components 的方法，而不是将标准导入为需要应用于 img 元素的 url。

无插件（默认导入）

import * as React from 'react';
import logo from './logo.png'; // import file as a url

function Header() {
  return <img src={logo} alt="logo" />;
}

export default Header;

带插件（命名导入）

import * as React from 'react';
import { ReactComponent as Logo } from './logo.svg'; // import file as a React component

function Header() {
  return <Logo />;
}

export default Header;

---

更新

再深入一点，该插件似乎有助于通过以下方式导入 svg 文件：

import logo from "logo.svg"; // default import
import { logoUrl } from "logo.svg"; // named import
import { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg"; // ReactComponent import

CRA 专门针对svg 文件格式，如其test suites 所示。至于它是否支持其他非 js 文件，不太可能（特别是因为 babel 插件在 CRA webpack 配置中只使用过一次）。

正如svgr中提到的docs：

SVGR 可以用作 webpack 加载器，这样您就可以直接将 SVG 作为 React 组件导入。

此特定插件旨在将任何svg 文件导入为默认导出。

请注意，默认情况下，@svgr/webpack 如果没有其他加载器处理默认导出的 svg 文件，@svgr/webpack 将尝试通过默认导出导出 React 组件。

而 CRA 似乎利用 file/url loader 进行默认/命名导出，并专门将 ReactComponent 命名导出映射到 svgr webpack 插件。