npm (basic)

basics - what

depth - why

#npm basics - Modern front-end development patterns

## What did the front end look like many years ago?

##Add

###Node

SDK(software develop kit):Node jdk()

IDE (integrated dev env): VSCode

#### With npm, we can create a project environment

npm - understood as a package management download tool

Under each project managed by npm, there will be a file called package.json

"script":{
    "test":"jest"
 }

The command line in package.json will automatically go to your ./node_modules/bin path to find it.

## For so many years, the front end has not changed much, and the browser still only recognizes three major components.

##Modern front-end development framework

Webpack rollup vue react ...

##rollup

rollup.config,js

const livereload=require('rollup-plugin-livereload')
const serve=require('rollup-plugin-serve')
module.exports={
input:'./src/index',
output:{
     file:'./dist/bundle.js',
     format:'iife'
  },
plugins:[
livereload(),
serve({
   openPage:'./index.html',
   port:3020,
   contentBase:"./"

  })
 ]
}

src/index.js

console.log('hello',welcome to use this website)

window.reload=function(){
console.log('hello reloaded')
}

dist/bundle.js

Simple script:

       (function () {
            'use strict';
            console.log('hello, welcome to use this website')

            window.reload = function () {
                console.log('hello reloaded')
                const root=document.getElementById('root')
                root.innerHTML='hello everyone'
            }

        })

package.json

"script":{
+"build":"rollup -c -W"
}

src/index.html

  <script id='root' src="/test01/dist/bundle.js"></script>
 //test01是项目名

Guess you like