解决babel/generater生成中文等特殊字符被转义为Unicode编码问题

最新推荐文章于 2025-03-19 09:03:05 发布

csdn_zhoushengnan

最新推荐文章于 2025-03-19 09:03:05 发布

阅读量1.9k

点赞数 1

文章标签： babel

本文链接：https://blog.youkuaiyun.com/csdn_zhoushengnan/article/details/116490182

版权

如果你也和我一样,在学习使用babel/generator将ATS生成字符串时, 遇到了中文被转义为Unicode编码的问题,也许这篇博客就是你的菜~~~

需求

需求：读取router.js文件，将新增路由信息通过新增ATS方式修改router.js文件,原 router.js文件如下所示:

let uid = 1;

function genUid() {
  return 'hee-' + uid++;
}

export default [{
  path: '/SN_PUBLIC_PREVIEW',
  name: '预览页',
  meta: {
    id: genUid(),
    code: 'SN_PUBLIC_PREVIEW',
    moduleName: '预览页'
  },
  component: () => import('_sn/SN_PUBLIC_PREVIEW')
}];

修改后router.js文件需如下所示：

let uid = 1;

function genUid() {
  return 'hee-' + uid++;
}

export default [{
  path: '/SN_PUBLIC_PREVIEW',
  name: '预览页',
  meta: {
    id: genUid(),
    code: 'SN_PUBLIC_PREVIEW',
    moduleName: '预览页'
  },
  component: () => import('_sn/SN_PUBLIC_PREVIEW')
},
{
	path: '/test',
	name: '测试页',
	meta: {
		 id: genUid(),
    	code: 'test',
    	moduleName: '测试页'
	},
	component: () => import('_sn/test')
}];

步骤复现

1. 实现代码

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const t = require('@babel/types');
const generate = require("@babel/generator").default;
const fs = require("fs")

function add(file, params) {
    readFilePromise(file).then(data => {
        const code = data
	    const ast = parser.parse(code, {
	        allowImportExportEverywhere: true
	    });
	    // 1. 生成path属性
	    const propertyPath = t.objectProperty(
	        t.identifier('path'), 
	        // t.callExpression(t.stringLiteral(params.path), [])
	        t.stringLiteral(params.path)
	    );
	    // 2. 生成name属性
	    const propertyName = t.objectProperty(
	        t.identifier('name'), 
	        t.stringLiteral(params.name)
	    );
	    // 3. 生成meta属性
	    const propertyMetaId = t.objectProperty(
	        t.identifier('id'), 
	        t.identifier("genUid()")
	    );
	    const propertyMetaCode = t.objectProperty(
	        t.identifier('code'), 
	        t.stringLiteral(params.code)
	    );
	    const propertyMetaModName = t.objectProperty(
	        t.identifier('moduleName'), 
	        t.stringLiteral(params.moduleName)
	    );
	    
	    const propertyMetaValue = t.ObjectExpression(
	        [propertyMetaId, propertyMetaCode, propertyMetaModName]
	    )
	    const propertyMeta = t.objectProperty(
	        t.identifier('meta'), 
	        propertyMetaValue
	    );
	    // 4. 生成component属性
	    const importPath = t.stringLiteral(params.component)
	    const importCallee = t.import()
	    const importExpression = t.callExpression(importCallee, [importPath])
	    const arrowFuncExp = t.ArrowFunctionExpression([], importExpression)
	    const propertyComponent = t.objectProperty(
	        t.identifier('component'), 
	        arrowFuncExp
	    );
	
	    const properties = [propertyPath, propertyName, propertyMeta, propertyComponent];
	    const routeObj = t.ObjectExpression(properties);
	
	    traverse(ast, {
	        ExportDefaultDeclaration: function (path) {
	            path.node.declaration.elements.push(routeObj)
	        }
	    })
	    const newAst = generate(ast, {}, code);
	    fs.writeFileSync('./output.js', newAst.code, 'UTF-8')
	})
}

2. 生成router.js效果

let uid = 1;

function genUid() {
  return 'ffe-' + uid++;
}

export default [{
  path: '/SN_PUBLIC_PREVIEW',
  name: '预览页',
  meta: {
    id: genUid(),
    code: 'SN_PUBLIC_PREVIEW',
    moduleName: '预览页'
  },
  component: () => import('_sn/SN_PUBLIC_PREVIEW')
},
{
  path: "/test",
  name: "test",
  meta: {
    id: genUid(),
    code: "ffe-test1",
    moduleName: "\u7ED3\u679C\u9875"
  },
  component: () => import("_nv/test1.vue")
}];

3. 问题

将中文转义为Unicode编码了！！！！！！！！

在这里插入图片描述

4. 在代码中添加如下语句

在这里插入图片描述

5. 最终效果

let uid = 1;

function genUid() {
  return 'hee-' + uid++;
}

export default [{
  path: '/SN_PUBLIC_PREVIEW',
  name: '预览页',
  meta: {
    id: genUid(),
    code: 'SN_PUBLIC_PREVIEW',
    moduleName: '预览页'
  },
  component: () => import('_sn/SN_PUBLIC_PREVIEW')
},
{
	path: '/test',
	name: '测试页',
	meta: {
		 id: genUid(),
    	code: 'test',
    	moduleName: '测试页'
	},
	component: () => import('_sn/test')
}];