如何让 babel 正确识别导入路径的 es6 模块名称答案

【问题标题】：How to get babel to properly recognize es6 module names for import path如何让 babel 正确识别导入路径的 es6 模块名称
【发布时间】：2021-08-10 20:13:08
【问题描述】：

我的董事结构如下：

js\
  foo-bar\
    abc.js
    index.js

在abc.js里面我有：

export default class ABC { .. }

在index.js 里面我有：

import ABC from "foo-bar/abc"

export { ABC }

我正在使用 WebPack 构建并且我有这个规则：

module.exports = {
  entry: "foo-bar",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

但是，当我尝试构建时，babel-loader 出现以下错误：

./foo-bar/index.js (../node_modules/babel-loader/lib!./foo-bar/index.js) 中的错误找不到模块：错误：无法解析“/Users/myname/projects/my-app/assets/js/foo-bar”中的“foo-bar/abc” @ ./foo-bar/index.js (../node_modules/babel-loader/lib!./foo-bar/index.js) 194:0-40 197:0-38

如何让 babel 识别正确的模块名称以在同一个项目中导入？我宁愿避免使用相对路径。

【问题讨论】：

标签： javascript webpack babeljs babel-loader

【解决方案1】：

import 语句中的路径始终相对于当前模块目录 (__dirname)。

尝试以下操作：import ABC from "abc"。

此外，由于您使用的是ES6 Syntax，因此出于多种原因，我建议您仅使用命名的导入/导出。专门用于改善构建时的树抖动。

所以，最好这样写：

class ABC { .. };

export {ABC};

import { ABC } from "abc";

export { ABC };

假设您要从 index.js 文件中重新导出多个模块。

编辑：

由于您使用 Webpack 进行捆绑，因此您可以根据需要使用绝对路径，方法是在路径前加上 /。请参阅docs。

但是/ 解析为文件系统的根目录。

您可以按如下方式更改您的 Webpack 配置：

const {resolve} = require('path');

module.exports = {
  entry: "foo-bar",
  resolve: {
    root: path.resolve('./js') // OR WHATEVER PATH TO YOUR 'js' DIRECTORY.
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

然后试试：import ABC from "foo-bar/abc";（不带前导/）

【讨论】：