如何在构建时使用Babel(而不是Webpack)编译模板字符串

2ic8powd  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(261)

我正在使用Babel(没有Webpack)来翻译一些ES6代码。代码包含一个模板文字,我想在构建时对其进行评估。
代码包含以下导入,我想在其中注入版本:

const Component = React.lazy(() => import(`projectVersion${__VERSION__}/FooBar`))

我已经使用了许多不同的插件来尝试和实现这一点,如babel-plugin-inline-replace-variablesbabel-plugin-transform-inline-environment-variables,但代码编译成这样:

var Component = /*#__PURE__*/_react.default.lazy(function () {
  return Promise.resolve("projectVersion".concat("1", "/FooBar")).then(function (s) {
    return _interopRequireWildcard(require(s));
  });
});

但我所追求的是沿着这样的东西(就好像我只是手动将版本添加到projectVersion):

const Component = /* #__PURE__*/_react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require('projectVersion1/FooBar'))))

其中一个原因是,当使用concat运行代码时,我得到错误Critical dependency: the request of a dependency is an expression
提前感谢您的帮助和建议。

详细信息

命令:babel src --out-dir build
巴别塔配置:

module.exports = api => {
  api.cache(true)

  return {
    presets: [
      ['@babel/preset-env', {
        corejs: 3,
        targets: '> 0.25%, not dead',
        useBuiltIns: 'usage',
      }],
      ['@babel/preset-react', {
        runtime: 'automatic',
      }],
      '@babel/preset-typescript',
    ],
    plugins: [],
  }
}
zy1mlcev

zy1mlcev1#

在尝试了许多不同的潜在解决方案后,我最终决定编写一个自定义的Babel插件,用StringLiteral替换TemplateLiteral
下面的代码写得很慢,是针对我的用例的,但希望它能帮助到别人。如果我有时间,我会让它更健壮,更可重用,并在npm上分享。

module.exports = ({ types: t }) => ({
  visitor: {
    TemplateLiteral(path, state) {
      const { version } = state.opts

      const { expressions, quasis } = path.node
      const expressionStrings = expressions.map(exp => exp.name)

      if (expressionStrings.length === 1 && expressionStrings.includes('__VERSION__')) {
        const startString = quasis.find(q => q.tail === false).value.raw
        const endString = quasis.find(q => q.tail === true).value.raw

        path.replaceWith(
          t.StringLiteral(`${startString}${version}${endString}`),
        )
      }
    },
  },
})

使用插件就像将其添加到Babel插件中一样简单:

plugins: [
  ['./babel/interpolate-template-literal', {
    version: "99",
  }],
],

相关问题