Javascript 功能在webpack捆绑包中不可用

我正在处理这个项目，我正在使用创建捆绑包文件

我在一个文件夹中分组了我的。对于导出所有模块的每个文件夹

另外，我还有一个导入所有index.js的全局函数，如下所示：

import * as Has from "./scripts/array/has"
import * as  Math from "./scripts/array/math"
import * as  Arrow from "./scripts/array"
export { Has, Math, Arrow }

现在，我想从这个全局文件创建我的包

我的配置如下所示：

const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
    mode: "development",
    entry: {
        arrow: "./src/1.x.x/index",
    },
    plugins: [
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './build',
    },
    output: {
        filename: "[name]-alpha.js",
        path: path.resolve(__dirname, 'build'),
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
}

问题是当我尝试从导入函数时，函数没有出现在自动完成中，并且我收到错误，这些函数是未定义的

我刚刚有了

\uuuuuu esModule

：

import { __esModule } from "./arrow-alpha"

我想让开发人员使用和导入像

---

我在这一步中阻止了几天，无法解决问题。

听起来您希望将代码导出为带有

webpack

的库。为此，您应该将库模块导出为

umd

，它可以用于后端/客户端，这样IDE也可以理解您导出的内容。只需在

webpack.config.js

中添加以下配置：

output: {
  libraryTarget: 'umd', // style for your library
  library: 'yourLibName', // if you keen to have a name for library
  // ...
},

注意：仅当您传递到

webpack

a

cjs

样式代码时，此功能才有效，否则它将转换为无法相应导出的和声模块（例如

esm

模块）

为了确保

babel

将您的

esm

模块转换为

commonjs

，您必须将

modules

设置为

commonjs

，如下所示：

babel.config.js

或

.babelrc

[
  "@babel/preset-env",
  {
    "modules": "commonjs",
  }
]

---

听起来你想用

webpack

将代码导出为库。为此，您应该将库模块导出为

umd

，它可以用于后端/客户端，这样IDE也可以理解您导出的内容。只需在

webpack.config.js

中添加以下配置：

output: {
  libraryTarget: 'umd', // style for your library
  library: 'yourLibName', // if you keen to have a name for library
  // ...
},

注意：仅当您传递到

webpack

a

cjs

样式代码时，此功能才有效，否则它将转换为无法相应导出的和声模块（例如

esm

模块）

为了确保

babel

将您的

esm

模块转换为

commonjs

，您必须将

modules

设置为

commonjs

，如下所示：

babel.config.js

或

.babelrc

[
  "@babel/preset-env",
  {
    "modules": "commonjs",
  }
]

---

添加以下配置。将弹出要访问的最后一个捆绑包，作为添加脚本到index.html页面上的窗口。箭头

output: {
        filename: "[name]-alpha.js",
        path: path.resolve(__dirname, 'build'),
        library: 'Arrow',
        libraryTarget: 'var'
    },

以及src文件夹中的index.js页面

module.exports = require('./scripts/array');

---

添加以下配置。将弹出要访问的最后一个捆绑包，作为添加脚本到index.html页面上的窗口。箭头

output: {
        filename: "[name]-alpha.js",
        path: path.resolve(__dirname, 'build'),
        library: 'Arrow',
        libraryTarget: 'var'
    },

以及src文件夹中的index.js页面

module.exports = require('./scripts/array');

---

我仍然只收到

\uu esModule

。你可以查看帖子中的链接。这是bundle文件：似乎您没有再次运行build。你能再次尝试构建吗？我生成了新的捆绑包，请看一看。谢谢。啊，我明白了。如果您以

esm

的形式输入

webpack

，它将创建IDE不理解的

harmony

模块。但是如果您先使用

babel

转换

cjs

，然后传递到

webpack

，那么它应该可以工作。我仍然只收到

\u esModule

。您可以查看帖子中的链接。这是bundle文件：似乎您没有再次运行build。你能再次尝试构建吗？我生成了新的捆绑包，请看一看。谢谢。啊，我明白了。如果您以

esm

的形式输入

webpack

，它将创建IDE不理解的

harmony

模块。但是，如果您先使用

babel

转换

cjs

，然后传递到

webpack

，它应该可以工作。我尝试过，但无法访问它们。你会开一家公关公司吗？我试过了，但我无法访问它们。你会开一家公关公司吗？