所有现有答案的问题是,它们是运行时解决方案。也就是说,他们采用多行模板文字并在程序执行时通过函数运行它,以消除前导空格。这是这样做的“错误方式”,因为这个操作应该在编译时完成。原因是,在这个操作中没有任何东西需要运行时信息,所有需要的信息在编译时都是已知的。
为了在编译时完成,我编写了一个名为 Dedent Template Literals 的 Babel 插件。基本上它的工作原理如下:
const httpRFC = ` Hypertext Transfer Protocol -- HTTP/1.1
Status of this Memo
This document specifies an Internet standards track protocol for the
Internet community, and requests discussion and suggestions for
improvements. Please refer to the current edition of the "Internet
Official Protocol Standards" (STD 1) for the standardization state
and status of this protocol. Distribution of this memo is unlimited.
Copyright Notice
Copyright (C) The Internet Society (1999). All Rights Reserved.`;
console.log(httpRFC);
将打印:
Hypertext Transfer Protocol -- HTTP/1.1
Status of this Memo
This document specifies an Internet standards track protocol for the
Internet community, and requests discussion and suggestions for
improvements. Please refer to the current edition of the "Internet
Official Protocol Standards" (STD 1) for the standardization state
and status of this protocol. Distribution of this memo is unlimited.
Copyright Notice
Copyright (C) The Internet Society (1999). All Rights Reserved.
插值工作也没有任何问题。此外,如果您在模板文字的开始反引号之后的第一列之前开始一行,插件将抛出错误,显示错误的位置。如果以下文件位于src/httpRFC.js
您的项目下:
const httpRFC = ` Hypertext Transfer Protocol -- HTTP/1.1
Status of this Memo
This document specifies an Internet standards track protocol for the
Internet community, and requests discussion and suggestions for
improvements. Please refer to the current edition of the "Internet
Official Protocol Standards" (STD 1) for the standardization state
and status of this protocol. Distribution of this memo is unlimited.
Copyright Notice
Copyright (C) The Internet Society (1999). All Rights Reserved.`;
console.log(httpRFC);
转译时会出现以下错误:
Error: <path to your project>/src/httpRFC.js: LINE: 11, COLUMN: 17. Line must start at least at column 18.
at PluginPass.dedentTemplateLiteral (<path to your project>/node_modules/babel-plugin-dedent-template-literals/index.js:39:15)
at newFn (<path to your project>/node_modules/@babel/traverse/lib/visitors.js:175:21)
at NodePath._call (<path to your project>/node_modules/@babel/traverse/lib/path/context.js:55:20)
at NodePath.call (<path to your project>/node_modules/@babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (<path to your project>/node_modules/@babel/traverse/lib/path/context.js:92:31)
at TraversalContext.visitQueue (<path to your project>/node_modules/@babel/traverse/lib/context.js:116:16)
at TraversalContext.visitSingle (<path to your project>/node_modules/@babel/traverse/lib/context.js:85:19)
at TraversalContext.visit (<path to your project>/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (<path to your project>/node_modules/@babel/traverse/lib/index.js:82:17)
at NodePath.visit (<path to your project>/node_modules/@babel/traverse/lib/path/context.js:99:18) {
code: 'BABEL_TRANSFORM_ERROR'
}
如果您使用制表符(并且只有制表符)进行缩进并使用空格(并且只有空格)进行对齐,它也适用于制表符。
它可以通过运行来安装,也可以通过npm install --save-dev babel-plugin-dedent-template-literals
在Babel 配置中作为数组dedent-template-literals
的第一个元素来使用。更多信息可以在 README 中找到。plugins