Question 45333 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    As it mentioned in the comments, you should download Node.js first.
    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:

    step1

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

    step2

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

    step3
    in the package.json file you will find a line with"scripts".
    add the following lines to it: 

    "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

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

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

    Hope it will helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search