在‘./components/initMap’中找不到导出‘components’的小叶

Question

我正在尝试用webpack做app并使用leaflet，但是当我试图从./components/map中导出函数initMap()到我的index.js时，我得到了一个警告：WARNING in ./src/js/index.js 6:2-9 "export 'initMap' was not found in './components/map'和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和巴别塔来说完全是新的，所以这可能是一个糟糕的例子：

​

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位于/components/中。

因此，index.js中的相对路径应该是

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

试试看。