Gulp 需要别名

Question

我正在寻找一种使用 gulp 来执行 require 别名的安全方法。这个想法类似于 webpack offers with resolve alias.

例如，我把我的源代码放在 require('@plugin/utils') 之类的东西上，它被翻译成我选择的东西，比如 require('$/plugins/longer/namespace/utils')。您可能已经注意到它与任何实际文件路径都不匹配，这是故意的（如果有人感兴趣的话，它们是 tiddlywiki 文件）。我发现的最好的东西是 gulp-replace，但它在最坏的情况下依赖于字符串替换，在最好的情况下依赖于正则表达式。理想情况下，我会想要一些更可靠的东西，一些 AST 感知的东西，所以我确信我永远不会替换错误的字符串（例如，模板字符串）。我也在使用 babel，所以如果有我可以使用的 babel 插件，我也会很高兴。作为最后的手段，我可能会尝试使用 esprima 编写一些 babel 插件或 gulp 插件，但 esprima 不符合现代 JS 标准（不解析对象传播），我更愿意创建另一个工具。

提前致谢

Answer 1

最后我找到了一个 babel 模块 (babel-plugin-module-resolver)，我可以将它与 gulp 集成，并使用 eslint 进行一些额外的配置。

所以，这就是我添加到我的 gulp 管道（简化）

    const babelCfg = {
    plugins: [[
            require.resolve('babel-plugin-module-resolver'),
            {
                root: [ `${pluginSrc}/**` ],
                alias: { '@plugin': `$:/plugins/${pluginNamespace}` },
                loglevel: 'silent',
            }
          ]],
      };
   return gulp
        .src(`${pluginSrc}/**/*.js`)
        .pipe(babel(babelCfg))
        .pipe(gulp.dest(outPath.dist));

这会将所有引用转换为具有正确路径的 require('@plugin/xxxx')。通过一些额外的配置，您甚至可以让 eslint 警告您路径解析错误。您需要对其进行不同的配置，因为 eslint 需要真实路径，而输出文件需要特殊的命名空间。安装完 eslint-import-resolver-babel-module and eslint-plugin-import 这就是你应该添加到你的 eslint 配置中以使其工作的内容：

plugins:
    - import

env:
    node: true
    browser: true

settings:
    import/resolver:
        babel-module:
            root: ./src/**
            alias:
                "@plugin": ./src/the/real/path

rules:
    import/no-unresolved: [2, { commonjs: true }]

Gulp 需要别名

Gulp require alias

gulp