功能在Webpack捆绑包中不可用

问题描述

我正在研究Arrow项目，并且正准备使用Webpack创建捆绑包文件。

我将modules分组在一个文件夹中。对于每个文件夹，我都有index.js，在其中导出所有模块。

此外，我有全局index.js，它像这样导入所有 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 }

现在，我想从这个全局index.js创建我的捆绑包。

我的Webpack配置如下：

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',}

问题是当我尝试从build导入函数时，这些函数未出现在自动完成中，并且我收到以下错误消息： undefined！

我只有___esModule：

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

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

之类的功能

import {omit} from "arrow" // arrow is the bundled file

const frameworks = ["react","vue","ember","angular"];
const withoutAngular = omit(frameworks,"angular");

console.log(withoutAngular); // ["react","ember"]

我在此步骤中封锁了好几天，但无法找出问题所在。

解决方法

听起来好像您正在使用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样式代码传递给cjs时，此方法才有效，否则它将转换为和声模块，您可以不会相应地导出（例如esm模块）

为了确保babel将esm模块转换为commonjs，必须将modules设置为commonjs，如下所示：

babel.config.js或.babelrc

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

在“配置”下面添加。在将脚本添加到index.html页面

时，将弹出您的最终捆绑包，以作为 Window.Arrow 访问。

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

和您在src文件夹中的index.js页面一样

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

javascript webpack webpack webpack