在浏览器文件中使用 import 或 require

Question

我正在使用 react 和 nextjs 为 Shopify 商店开发我的应用程序。在这个应用程序中，我正在创建一个脚本标签（SHOPIFY API），它向店面添加一些功能并从那里存储一些数据。现在，我想将该数据存储在需要导入或需要某些节点模块的某个文件中，但是当我使用“import”语句时，它给了我“不能在模块外使用导入”和使用“require”语句给我“未定义要求”错误。 我在网上搜索并找到了使用“Browserify”的解决方案。但是，在 browserify 中，当我没有任何 html 文件时，它们在 html 文件中包含脚本。我想将js文件加载到js文件中。

scripttag.js（我想在文件中包含文件系统和 firebase-admin）

var fs = require('fs');
console.log('this is me script tag!!!!!!!!')
const header = $('header.site-header').parent();

header.prepend('<div>Hello this is coming from the public folder </div>').css({'background-color':'orange', 'text-align': 'center'})

function addWishList(customer, productid){
/*
  fetch(`url`, {
    method: 'POST',
    headers: {
      'Content-Type': ,
      "X-Shopify-Access-Token": ,
    },
    body: 
    }})
  })

*/

    console.log('adding item to the wishlist!!')
}

function removeWishList(){
    console.log('removing item from the wishlist!!')
}

// const b1 = $('button.wishlist-btn');
// b1.on("click", addWishList);
 var wishbtn = document.querySelector('.wishlist-btn')
 wishbtn.addEventListener('click', function(){
     if(this.classList.contains('active')){             //condition to check if the button is already pressed
        removeWishList();
        this.classList.remove('active');
        this.innerHTML = 'Add to wishlist'
     }
     else{
        var customer = wishbtn.dataset.customer;
        if(customer == null || customer == ''){
            console.log('bhai log in kro')
        }
        else{
            var productid = wishbtn.dataset.product;
            this.classList.add('active');      //when the user presses add to wishlist button, it add active to the button's class
            this.innerHTML = 'Remove from wishlist'
            addWishList(customer, productid);
        }
       
   //     console.log(customer);
   //     console.log(productid)
        
  //      wishbtn.innerHTML= 'added to the wishlisht'
     }
     
 })

Answer 1

您可以通过将加载文件时使用的<script> 标签更改为启用 ES 模块

<script type="module" src="<your scriptfile"></script>