ES6 Webpack 相对导入 - 找不到模块：错误：无法解析模块答案

【问题标题】：ES6 Webpack Relative imports - Module not found: Error: Cannot resolve moduleES6 Webpack 相对导入 - 找不到模块：错误：无法解析模块
【发布时间】：2023-03-15 07:54:02
【问题描述】：

在使用 ES6 和 Babel 时，我正在尝试查找有关 Webpack 和相关导入的一些信息。

我的应用程序的一个简单入口点中有一个导入行：

// app.es6
import * as sayHello from 'sayHello';
console.log(sayHello());

sayHello.es6 与app.es6 是同一目录。（sayHello.es6的内容不重要）。

当我通过命令行运行 Webpack 编译器时：

$ webpack

我收到以下错误：

ERROR in ./app/app.es6
Module not found: Error: Cannot resolve module 'sayHello' in /Users/username/Code/projectname/app

这可以通过设置相对路径来解决：

// app.es6 - note the ./ in the import
import * as sayHello from './sayHello';
console.log(sayHello());

这有点麻烦，因为它与 Babel 网站上 Modules 部分下的示例 es6 代码不同。

这是我的 Webpack 配置：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.es6'
  ],
  output: {
      publicPath: '/',
      filename: './dist/app.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js|\.es6$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:
        {
          presets:['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.es6'],
  },
};

问题：有人知道为什么会有这种差异吗？或者有关 ES6 模块导入的相关信息在 Webpack 文档中的什么位置？

【问题讨论】：

所以你想在导入中去掉./？
基本上，是的。我一直在关注 Babel 模块 ES6 示例，而这个例子让我感到震惊。
也许使用resolve.modules？使用路径解析
您正在查看的示例在哪里说省略了./？ Babel 在这里没有什么特殊的逻辑，和require 调用是一样的。 ./sayHello 表示查找相对于当前文件的文件，sayHello 表示从 node_modules 加载一个名为 sayHello 的模块。这个例子也是错误的，因为import * as sayHello from './sayHello'; sayHello 只能是一个对象，在符合规范的 ES6 中它不可能是一个函数。
我省略了 ./ 的示例在第一个示例中。另外，我没有意识到它只能是一个对象。（新学到的东西。）

标签： javascript webpack ecmascript-6 babeljs

【解决方案1】：

这是设计使然，没有前缀表示模块应该从 node_modules 目录加载。你可以在你的 webpack 配置中设置一个别名，这将消除对相关模块导入的需要

resolve: {
  alias: { 
    sayHello: '/absolute/path/to/sayHello'
  },
  extensions: ['', '.js', '.es6']
}

然后，Webpack 将填补您导入语句中的空白，并允许您省略相对路径，import * as sayHello from 'sayHello'; 将在您的整个项目中工作

【讨论】：

所以在 ES6 模块导入中，可以将 ./ 留在外面（根据 Babel 网站上模块下的示例），但在 Webpack 中，它们必须在里面？