微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么parcel.js 会在dist 文件夹中创建两个Javascript 文件?

如何解决为什么parcel.js 会在dist 文件夹中创建两个Javascript 文件?

我正在使用 Parcel 来捆绑我的 javascript 文件(只有其中两个)。但是,当我运行“parcel serve src/index.html”的脚本时。当我只需要一个 bundle.js 文件时,它会在 dist 文件夹中创建两个 js 文件(main.js 和 script.js)。我怎么知道它将所有内容组合到一个 js 文件中?

Script.js

import 'babel-polyfill';  
import SmoothScroll from 'smooth-scroll';

import './fetchBlogs'

// * Navigation
var navbar = document.querySelector('nav ul') 
// Hamburger Menu ?
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click",function() {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  navbar.classList.toggle("nav-is-open")
  // Do something else,like open/close menu
}); 

// * Smooth Scroll
var scroll = new SmoothScroll('a[href*="#"]');

fetchBlogs.js

import Splide from '@splidejs/splide';

// * IIFE for Fetching Blog Data
(async function fetchBlogs() {
  // Check if sessionStorage Contains Blog Data
  if (sessionStorage.getItem('blogData') !== null) {
    injectBlogData(JSON.parse(sessionStorage.getItem('blogData')));
  } else {
    // Make API CALL to fetch Data
    const res = await fetch(
      'https://www.googleapis.com/blogger/v3/blogs/3263602042122260502/posts?key=AIzaSyAx5Uf4c_26OHE47MII94f70NO89kNsqaM'
    );

    // Error While Fetching Data from API
    if (res.status !== 200) {
      console.log('Error! While Fetching Blogs');
      document.querySelector('.slide_1').textContent = "Error While Fetching Blogs..."
      return;
    }
    const data = await res.json();
    sessionStorage.setItem('blogData',JSON.stringify(data));
    injectBlogData(data);
  }
})();

// * Injects Blog Data in Splide HTML Block
function injectBlogData(data) {
  // console.log(data);

  // Destructure Data
  const { items: posts,nextPagetoken } = data;

  // Select All Blogs
  const blogs = document.querySelectorAll('.blog');

  // Loop Over Each Blog and Inject HTML in it
  blogs.forEach((blog,blogIndex) => {
    // Create HTML Elements
    const h2 = document.createElement('h2');
    const h5 = document.createElement('h5');
    const p = document.createElement('p');
    const h4 = document.createElement('h4');
    const br = document.createElement('br');

    // ? See if I can use splide id's instead of creating new classes of my own (After Configuring Webpack)
    const currentBlogPost = document.querySelector(`.slide_${blogIndex + 1}`);

    // Destructure Blog Data
    let { content,labels,published,title,url } = posts[blogIndex];

    // Add Blog Data to HTML Elements
    h2.innerHTML = title;
    currentBlogPost.appendChild(h2);
    // Create Labels
    labels.forEach((labelText) => {
      let newLabel = document.createElement('span');
      newLabel.classList.add('tag');
      newLabel.textContent = labelText;
      h5.appendChild(newLabel);
    });
    // currentBlogPost.(br);
    currentBlogPost.appendChild(h5);
    currentBlogPost.appendChild(br);
    // Blog Content
    p.innerHTML = content;
    currentBlogPost.appendChild(p);
    // Format Date
    let formatedDate = new Date(published).toDateString().split(' ');
    formatedDate = `${formatedDate[1]} ${formatedDate[2]},${formatedDate[3]}`;
    h4.innerHTML = formatedDate;
    currentBlogPost.appendChild(h4);
  });
}

// * Splide Code
new Splide('.splide',{
  type: 'fade',perPage: 1,padding: {
    right: '5rem',left: '5rem',},}).mount();

// * A Function for trnsparencig the next and prev btn on blog section
function frontendVisibility() {
  if (currentPost === 0) {
  }
}

HTML Head

dist folder

JS files

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。