英文:
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>
在你的项目目录文件夹中安装了node
和npm
之后,在终端中运行以下脚本:<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"scripts"
.<br>
add the following lines to it: <br>
"scripts": {
"start": "parcel ./*.html",
"build": "parcel build ./*.html"
},
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
属性。
该属性指定了当某人import
或require
您的包时将加载哪个文件/模块。由于看起来您并非创建将被导入的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 import
s or require
s 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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论