在 './components/map' 中找不到传单“导出 'initMap'

Question

我正在尝试使用 webpack 做应用程序并使用传单，但是当我尝试将函数 initMap() 从 ./components/map 导出到我的 index.js 时，我有一个警告：WARNING in ./src/js/index.js 6:2-9 "export 'initMap' was not found in './components/map' 并且地图没有出现。

我做错了什么？

组件/map.js：

import "leaflet/dist/leaflet.css";
import L from "leaflet/dist/leaflet";

export function initMap() {
    const mymap = L.map('map').setView([57.54523915, 38.32934606], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Arctic',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoidW1sYXV0LWEiLCJhIjoiY2tldjJpeDkyM3B3NDJ4cGkxcXhkb3MzeSJ9.vl5cjrqkQXYkfEP1rPQJ9g'
    }).addTo(mymap);
}

index.js：

import "../css/main.css"
import { initMap, } from "./components/map";

document.addEventListener('DOMContentLoaded', () => {
    initMap();
});

那是我的 webpack.config.js 和 babel.config.json 文件，我对 webpack 和 babel 完全陌生，所以也许这是一个不好的例子：

const path = require('path');
const autoprefixer = require('autoprefixer');
const Entry = require('./webpack/Entry');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

const PUBLIC_PATH = path.join(__dirname, 'public', 'assets');
const IMG_PATH = path.join(PUBLIC_PATH, 'images');

module.exports = {
                        mode   : 'production',
                        devtool: false,
                        stats  : {
                            colors      : true,
                            hash        : true,
                            timings     : true,
                            assets      : true,
                            chunks      : true,
                            chunkModules: true,
                            modules     : false,
                            children    : false,
                        },
                        entry: { ...Entry.create(), },
                        output: {
                            filename: 'js/[name].[chunkhash:8].js',
                            chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
                            path: PUBLIC_PATH,
                            publicPath: '/assets/',
                                },
                        optimization: {
                          minimize: true,
                          noEmitOnErrors: true,
                                          splitChunks: {
                                              chunks: 'all',
                                              name: false,
                                                      },
                                        },
                          node: {
                            fs: "empty",
                            },
  plugins: [
    new CleanWebpackPlugin(),
    new AssetsPlugin({
        filename   : 'assets.json',
        path       : PUBLIC_PATH,
        prettyPrint: true,
        entrypoints: true,
    }),
    new SpriteLoaderPlugin({
            plainSprite: false,
        }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash:8].css',
      chunkFilename: 'css/[name].[chunkhash:8].css',
    })
    ],
    module: {
        rules: [
                            {
                                test   : /\.js$/,
                                exclude: /node_modules/,
                                use    : 'babel-loader'
                            },
                            {
                                test: /fonts[\\\/].+\.(eot|ttf|woff|woff2)$/,
                                use: {
                                    loader: 'file-loader',
                                    options: {
                                        name: 'fonts/[name].[ext]'
                                    }
                                },
                            },
                            {
                                test: /images[\\\/].+\.(gif|png|jpe?g|svg)$/i,
                                use: {
                                    loader: 'file-loader',
                                    options: {
                                        name: 'images/[name].[ext]',
                                    }
                                }
                            },
                            {
                                loader: 'image-webpack-loader',
                                options: {
                                    mozjpeg: {
                                        progressive: true,
                                        quality: 70
                                    },
                                    optipng: {
                                        enabled: true
                                    },
                                    pngquant: {
                                        quality: [0.7, 0.7],
                                        speed: 4
                                    },
                                    gifsicle: {
                                        interlaced: false
                                    },
                                }
                            },
                            {
                test: /\.s?css/i,
                use : [
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '/assets/',
                        },
                    },
                    'css-loader',
                    {
                        loader : 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer,
                            ],
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /icons[\\\/].+\.svg$/i,
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: false,
                            spriteFilename: 'icons/icons.svg',
                        }
                    },
                    {
                        loader: path.resolve(__dirname, './svgClean.js'),
                    },
                ]
            }
            
        ]
    },
};

    {
      "presets": [
        "@babel/preset-env"
      ],
      "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-class-properties",
        "@babel/plugin-proposal-class-properties",
      ]
    }

看起来 index.js 没有具体看到 ./components/map，因为当我在 ./components 中创建另一个测试函数时，它运行良好。

Answer 1

我认为组件的路径不正确。

index.js 位于/src/js/，组件位于/components/。

所以index.js中的relatvie路径应该是

import { initMap, } from "../../../components/map"

试一试。