// 大概就是这个意思, 列举出所有的原生标签名 context = context.replace( /\<(div|span|p|ul|li|i|a")/g, `<$1 tipx='${this.resourcePath}'` );

1. npx create-react-app show_path --template typescript, ts在后面有坑慢慢欣赏。
2. yarn eject 暴露配置。
3. 在config文件夹下建立loaders/loader.js。
   

   module.exports = function (context) { // .... 稍后在此大(lang)展(bei)身(bu)手(kan) context = context.replace( /\<(div|span|p|ul|li|i|a")/g, `<$1 tipx='${this.resourcePath}'` ); return context };

   
   
4. 打开show_path/config/webpack.config.js文件, 大概第557行, 添加如下代码:
   

   { test: /\.(tsx)$/, use: [ require.resolve("./loaders/loader.js") },

   
   

const str = "是古代程序员, 经常使用的标签"

自定义标签名

const str = "标签外层已经有双引号"// 替换后报错 const str = "标签外层已经有双引号"

import styled from "styled-components"; export default function Home() { const MyDiv = styled.div` border: 1px solid red; `; return 123 }

const esprima = require("esprima"); module.exports = function (context, map, meta) { let astTree = esprima.parseModule(context); console.log(astTree); this.callback(null, context, map, meta); };

let astTree = esprima.parseModule(context, { jsx: true });

estraverse.traverse(astTree, { enter(node) { console.log(node); }, });

// 替换前 const estraverse = require("estraverse"); // 替换后 const estraverse = require("estraverse-fb");

const esprima = require("esprima"); const estraverse = require("estraverse-fb"); const escodegen = require("escodegen"); module.exports = function (context, map, meta) { let astTree = esprima.parseModule(context, { jsx: true }); estraverse.traverse(astTree, { enter(node) {} }); // 此处将AST树转成js代码 context = escodegen.generate(astTree); this.callback(null, context, map, meta); };

const recast = require("recast"); module.exports = function (context, map, meta) { // 1: 生成树 const ast = recast.parse(context); // 2: 转换树 const out = recast.print(ast).code; context = out; this.callback(null, context, map, meta); };

// 替换前 context = escodegen.generate(astTree); // 替换后 context = recast.print(astTree).code;

const path = this.resourcePath; estraverse.traverse(astTree, { enter(node) { if (node.type === "JSXOpeningElement") { node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: "tipx", }, value: { type: "Literal", value: path, }, }); } }, });

1. 筛选出JSXOpeningElement类型的元素
2. node.attributes.push将要新增的属性放入元素的属性队列
3. JSXIdentifier属性名类型
4. Literal属性值类型

import React from "react"; export default function Home() { interface C { name: string; } const c: C = { name: "金毛", }; return home 页面; }

{ test: /\.(tsx)$/, use: [ require.resolve("./loaders/loader.js"), { loader: require.resolve("babel-loader"), options: { presets: [[require.resolve("babel-preset-react-app")]], }, }, ], },

// 之前的 const estraverse = require("estraverse-fb"); // 现在的 const estraverse = require("estraverse"); // 之前的 let astTree = esprima.parseModule(context, { jsx: true }); // 现在的 let astTree = esprima.parseModule(context);

// 之前的 estraverse.traverse(astTree, { enter(node) { if (node.type === "JSXOpeningElement") { node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: "tipx", }, value: { type: "Literal", value: path, }, }); } }, }); // 现在的 estraverse.traverse(astTree, { enter(node) { if (node.type === "ObjectExpression") { node.properties.push({ type: "Property", key: { type: "Identifier", name: "tipx" }, computed: false, value: { type: "Literal", value: path, raw: '""', }, kind: "init", method: false, shorthand: false, }); } }, });

"babel": { "presets": [ "react-app" ] },

"@babel/core": "7.12.3", "babel-loader": "8.1.0", "babel-plugin-named-asset-import": "^0.3.7", "babel-preset-react-app": "^10.0.0",

const esprima = require('esprima'); const estraverse = require('estraverse'); const recast = require('recast'); module.exports = function (context, map, meta) { const path = this.resourcePath; let astTree = ''; try { astTree = esprima.parseModule(context); estraverse.traverse(astTree, { enter(node) { if (node.type === 'ObjectExpression') { node.properties.push({ type: 'Property', key: { type: 'Identifier', name: 'tipx' }, computed: false, value: { type: 'Literal', value: path, raw: '""', }, kind: 'init', method: false, shorthand: false, }); } }, }); context = recast.print(astTree).code; } catch (error) { console.log('>>>>>>>>错误'); } return context; };

{ test: /\.(tsx)$/, use: [ require.resolve("./loaders/loader.js"), { loader: require.resolve("babel-loader"), options: { presets: [[require.resolve("babel-preset-react-app")]], }, }, ], },

推荐阅读

• 

  跨境出口电商 跨境电商网络销售什么意思，跨境电商网站
• 

  日照有哪些好玩的景点 日照景点推荐
• 

  电饭煲可以做哪些面食
• 

  java|java Springboot实现教务管理系统
• 

  纳格兰全任务详细攻略 纳格兰狩猎任务最终奖励物品
• 

  口罩|霾天来袭，专家：选对口罩，减少外出，讲究膳食
• 

  天津招聘临时工300一天一结 去天津打工哪个区好找活
• 

  铁路12306怎么查询正晚点情况？铁路12306查询正晚点情况的方法
• 

  上海城隍庙在上海哪个区 上海城隍庙在上海哪
• 

  《如梦令》～李清照的绿肥红瘦
• 

  跨境电商的特点 专注于移动的跨境电商平台是什么，跨境电商
• 

  小学一年级简单abb词语 一年级abb式词语大全简单的
• 

  《despacito》的歌词 despacito歌词翻译中文
• 

  爱普生7280废墨箱芯片
• 

  遇到松下空调温度显示88怎么办,是什么原因?
• 

  安卓开发工具内置flutter，安卓开发工具包
• 

  18，页面优化
• 

  原神登龙剑怎么用 原神登龙剑用法分享
• 

  我给你报销是什么意思 报销是什么意思
• 

  机场一般提前多久登机 一般提前多久到机场

• 考研英语阅读终极解决方案——阅读理解如何巧拿高分
• Ⅴ爱阅读，亲子互动——打卡第178天
• 如何寻找情感问答App的分析切入点
• 上班后阅读开始变成一件奢侈的事
• mybatisplus如何在xml的连表查询中使用queryWrapper
• mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
• MybatisPlus使用queryWrapper如何实现复杂查询
• 历史教学书籍
• 如何在Mac中的文件选择框中打开系统隐藏文件夹
• 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）