传单"出口'initMap'在'./components/map'中找不到

Question

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

我做错了什么？

components/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中的relative路径应该是

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

试试看。