如何在vanillaJS,html,css项目中使用NPM?

nkhmeac6  于 2023-02-17  发布在  其他
关注(0)|答案(3)|浏览(151)

我有一个项目,有3个html文件,即index.html,about.html和resource.html。
它有两个css文件,style.css和style1.css。它有两个javascript文件,script.js和script1.js。Index.html使用style.css和script.js。about.html使用style1.css和script1.js。resource.js也使用style1.css和script1.js。我想尝试初始化一个NPM项目,但是它要求一个入口点。我该怎么办?
我想使用webpack来捆绑我的项目,为此我需要使用NPM。这个项目是完全普通的。

v8wbuo2f

v8wbuo2f1#

您的问题似乎与运行npm init时询问的entrypoint问题特别相关。您在此处指定的值将设置为package.json中的属性main
该属性指定当importrequire对您的包执行操作时,将加载哪个文件/模块。因为看起来您并不是在创建一个要导入的npm包,而只是想使用npm来安装依赖项,所以您不需要关心它。您可以使用提供的默认值:index.js,即使它不存在。
您可以在这里阅读:https://docs.npmjs.com/cli/v9/configuring-npm/package-json#main

bt1cpqcv

bt1cpqcv2#

正如评论中提到的,您应该先下载Node.js
Node js附带了名为npm的包管理器。
在我看来,对于您的项目,webpack捆绑器一开始可能会令人困惑,所以我认为您应该使用Parcel
项目的步骤:

步骤1

在项目目录文件夹中安装nodenpm后,在终端中运行以下脚本:
npm init -y
它将在项目的根目录中创建一个package.json文件。

第二步

在终端中运行以下脚本,该脚本将安装包裹捆绑程序
npm install --save-dev parcel

步骤3package.json文件中,您将找到一行"scripts"

在其中添加以下行:

"scripts": {
    "start": "parcel ./*.html",
    "build": "parcel build ./*.html"
  },

完成后,您只需在终端中运行以下脚本,它将在本地计算机上启动一个dev服务器,并在localhost:1234上自动重新加载
npm run start
如果你想捆绑你的html项目,那么只需运行以下脚本:
x1米11米1x
为了更好地理解Parcel的工作原理,请参阅工具文档here
希望能有所帮助!

k7fdbhmy

k7fdbhmy3#

入口点通常是负责加载和执行其余代码的JavaScript文件。
在您的情况下,您可以使用任何js脚本,或者创建一个主脚本,将所有必需的脚本附加到该主脚本上,这在使用webpack构建应用程序时也会很有帮助。

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "Your project description",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "MIT"
}

在package.json文件中指定入口点之后,您就可以安装和配置Webpack以绑定您的项目。

相关问题