Parcel 2 - 未捕获错误：找不到模块“axios”

Question

我正在学习 udemy 课程“Node.js、Express、MongoDB 等”。在课程中，讲师使用parcel v1，但此后parcel创建了v2，我无法安装v1。 我试图从从 Parcel 创建的 dist 文件中调用该文件，在我的例子中是 ./public/js/bundle 并且我不断收到两个错误：

Refused to connect to 'ws://127.0.0.1:1234/' because it violates the following Content Security Policy directive: "default-src 'self' https://\*.mapbox.com". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Uncaught Error: Cannot find module 'axios'

这是我的代码：

基础.哈巴狗：

doctype html
html 
    head
        block head 
            meta(charset="UTF-8")
            meta(name="viewport" content="width=device-width, initial-scale=1.0")
            title Natours | #{title}
            link(rel="stylesheet", href="/css/style.css")
            link(rel="shortcut icon" type="image/png" href="/img/favicon.png")
            link(href="https://fonts.googleapis.com/css?family=Lato:300,300i,700" rel="stylesheet")

    body 
        // HEADER
        include header
        
        // CONTENT
        block content
            h1 This is a placeholder heading

        // FOOTER
        include footer


    block scripts 
        script(type="module" src="/js/bundle/index.js")

index.js：

import '@babel/polyfill'
import { displayMap } from './mapbox';
import { login } from './login';

// DOM ELEMENTS
const mapbox = document.querySelector('#map');
const loginForm = document.querySelector('.form');

// DELEGATION
if (mapbox) {
  const locations = JSON.parse(mapbox.dataset.locations);
  displayMap(locations);
}

if (loginForm) {
  loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;
    login(email, password);
  });
}

console.log('Hello from parcel');

登录.js：

import axios from 'axios';
import { showAlert } from './alert.js';

export const login = async (email, password) => {
  console.log(email, password);
  try {
    const res = await axios({
      method: 'POST',
      url: 'http://127.0.0.1:3000/api/v1/users/login',
      data: {
        email,
        password,
      },
    });

    if (res.data.status === 'success') {
      showAlert('Logged in successfully');
      window.setTimeout(() => {
        location.assign('/');
      }, 1500);
    }
  } catch (err) {
    showAlert(`Error: ${err.response.data.message}`);
  }
};

mapbox.js：

export const displayMap = (locations) => {
  mapboxgl.accessToken = 'MY_TOKEN';

  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/j-cet101/cll7vlp6l00oa01pd3pmu5r8r',
    scrollZoom: false,
  });

  map.addControl(new mapboxgl.NavigationControl());

  const bounds = new mapboxgl.LngLatBounds();

  locations.forEach((loc) => {
    // Create marker
    const el = document.createElement('div');
    el.className = 'marker';

    // Add marker
    new mapboxgl.Marker({
      element: el,
      anchor: 'bottom',
    })
      .setLngLat(loc.coordinates)
      .addTo(map);

    // Add popup
    new mapboxgl.Popup({
      offset: 30,
    })
      .setLngLat(loc.coordinates)
      .setHTML(`<p>Day ${loc.day}: ${loc.description}</p>`)
      .addTo(map),
      // Extend map bounds to include current location
      bounds.extend(loc.coordinates);
  });

  map.fitBounds(bounds, {
    padding: {
      top: 200,
      bottom: 150,
      left: 200,
      right: 200,
    },
  });
};

package.json 命令：

"watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js/bundle",
"build:js": "parcel build ./public/js/index.js --dist-dir ./public/js/bundle"

我不太确定为什么会收到此错误，或者我是否缺少某些模块，或者是否有其他内容已添加到包 v2 中，这是我不知道的必要内容，所以如果我不知道，我将不胜感激有人可以帮忙解决这个问题:)

注意：我已经安装了所有必需的软件包

Answer 1

我刚刚通过添加解决了问题

"browserslist": "> 0.5%, last 2 versions, not dead"

Source

- https://parceljs.org/getting-started/webapp/#declaring-browser-targets

到 package.json，现在我可以登录、查看地图并且网站工作正常，但我仍然收到此错误：

Refused to connect to 'ws://127.0.0.1:1234/' because it violates the following Content Security Policy directive: "default-src 'self' https://*.mapbox.com". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.