在现代的前端开发中，ES6 模块已经成为了不可替代的一部分，但是在使用 ES6 模块的过程中可能会遇到一些问题，比如，无法在运行时获取模块的路径，无法使用 import 给模块赋值等等。针对这些问题，有一个非常好用的 npm 包 —— babel-plugin-transform-import-meta。
什么是 babel-plugin-transform-import-meta
babel-plugin-transform-import-meta 是一个 Babel 插件，它可以将 ES6 模块中的 import.meta 转换成普通 JavaScript 对象，这个对象可以提供给我们关于模块的一些元数据，比如模块的 URL、模块的路径等等。
安装和使用
要安装 babel-plugin-transform-import-meta，首先需要安装 babel 和 babel-plugin-transform-import-meta 两个 npm 包，命令行输入：
npm install babel babel-plugin-transform-import-meta --save-dev
安装完成后，需要在项目的根目录下创建一个名为 .babelrc 的文件，这个文件就是 babel 的配置文件，我们可以在这个文件中配置插件的使用。
在 .babelrc 文件中写入以下代码：
{
"plugins": ["babel-plugin-transform-import-meta"]
}这样就可以使用 babel-plugin-transform-import-meta 了，但是需要注意的是，使用这个插件之后，我们在代码中使用 import.meta 语法时，需要给其加上一个 babelHelpers，否则代码在打包过程中将会抛出错误。
例如，以下代码：
console.log(import.meta.url);
需要改写为：
console.log(babelHelpers.get(babelHelpers.getPrototypeOf(import.meta), 'url', this));
有些麻烦，不过我们可以使用一个 babel 插件 —— @babel/plugin-transform-runtime，它可以自动给 import.meta 加上一个 babelHelpers，不需要我们手动添加。
首先需要安装这个插件：
npm install @babel/plugin-transform-runtime --save-dev
然后再 .babelrc 中加入以下代码：
{
"plugins": [
["@babel/plugin-transform-runtime", {
"regenerator": true
}],
"babel-plugin-transform-import-meta"
]
}现在，我们就可以轻易地在代码中使用 import.meta 语法了。
实例
让我们来看一个例子，假设我们需要获取当前模块的路径，可以在代码中这样写：
console.log(import.meta.url);
在使用了 babel-plugin-transform-import-meta 之后，会被转化为：
console.log(babelHelpers.get(babelHelpers.getPrototypeOf(import.meta), 'url', this));
这个结果不太直观，但是我们可以在浏览器中运行这段代码，或者在 node 中使用 console.dir(import.meta) 命令来查看这个对象的结构和内容。
它包含的数据如下：
{
url: 'file:///path/to/your/module.js', // 当前模块的 URL 地址
main: false, // 是否是入口模块
__proto__: { } // 原型对象
}从这个对象中，我们就可以轻松地获取当前模块的路径，方法如下：
const currentScript = document.currentScript console.log(currentScript.src)
总结
以上就是 babel-plugin-transform-import-meta 的使用教程，这个插件可以很方便地解决我们在使用 ES6 模块时遇到的一些问题。虽然需要手动加上 babelHelpers，但是我们可以使用 @babel/plugin-transform-runtime 来自动添加，让代码更加简洁易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2f45e23b0ab45f74a8bc76