如何在我的vanillaJS、html、css项目中使用NPM?

huangapple go评论78阅读模式
英文:

How do I use NPM in my vanillaJS, html, css project?

问题

我有一个项目,其中包括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。这个项目完全是纯粹的。

英文:

I have a project that has 3 html files namely index.html, about.html and resource.html.

It has two css files, style.css and style1.css. It has two javascript files, script.js and script1.js. Index.html uses style.css and script.js. about.html uses style1.css and script1.js. resource.js also uses style1.css and script1.js. I wanted tried initializing a NPM project, but it asks for an entry point. What do I do?

I want to use webpack to bundle my project, and for that I need to use NPM. This project is fully vanilla.

答案1

得分: 3

正如评论中提到的,你应该首先下载Node.js。<br>
Node.js附带了它的包管理器,称为npm

在我看来,对于你的项目,一开始可能会感到混乱的是webpack打包工具,所以我认为你应该使用Parcel代替。

你的项目步骤:<br>

步骤1<br>

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

步骤2 <br>

在终端中运行以下脚本,它将安装Parcel打包工具<br>
npm install --save-dev parcel <br>

步骤3
package.json文件中,你会找到一行带有"scripts"的内容。<br>
在其中添加以下行:<br>

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

完成后,你只需在终端中运行以下脚本,它将在localhost:1234上启动本地机器上的开发服务器,并实现自动重载。

npm run start <br>

如果你想打包你的HTML项目,然后运行以下脚本:<br>
npm run build <br>

为了更好地了解Parcel的工作原理,这里是工具文档。

希望对你有所帮助!

英文:

As it mentioned in the comments, you should download Node.js first. <br>
Node js come with its package manager called npm.

In my opinion for your project, the webpack bundler could be confusing at first, so I think you should use Parcel instead.

Steps for your project:<br>

step1<br>

After you installed node with npm in your project directory folder run the following script in a terminal: <br>
npm init -y <br>
It will create a package.json file int the root directory of your project. <br>

step2 <br>

run the following script in the terminal which will install parcel bundler <br>
npm install --save-dev parcel <br>

step3
in the package.json file you will find a line with&quot;scripts&quot;.<br>
add the following lines to it: <br>

&quot;scripts&quot;: {
    &quot;start&quot;: &quot;parcel ./*.html&quot;,
    &quot;build&quot;: &quot;parcel build ./*.html&quot;
  },

After you done it, you should just run the following script in your terminal, which will start a dev server on your local machine with automate reload on localhost:1234

npm run start <br>

If you want to bundle your html project, then just run the following script: <br>
npm run build <br>

For better understanding how Parcel works, here is the tools documentation.

Hope it will helps!

答案2

得分: 1

你的问题似乎与运行npm init时询问的entrypoint问题有关。您在那里指定的值将设置为package.json中的main属性。

该属性指定了当某人importrequire您的包时将加载哪个文件/模块。由于看起来您并非创建将被导入的npm包,只是想使用npm安装依赖项,所以您无需关心它。您可以使用提供的默认值:index.js,即使它不存在。

您可以在这里了解更多信息:https://docs.npmjs.com/cli/v9/configuring-npm/package-json#main

英文:

Your question seems to be specifically related to the entrypoint question asked when you run npm init. The value you specify there will be set to th property main, in package.json.

That property specifies what file/module will be loaded when someone imports or requires you package. As it doesn't look like you are creating an npm package that will be imported and simply wants to use npm to install dependencies, you don't need to care about it. You can use the default value provided: index.js, even if it doesn't exist.

You can read about it here: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#main

huangapple
  • 本文由 发表于 2023年2月16日 17:51:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75470483.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定