基础-是什么

深度-为什么

#npm基础 - 现代前端开发模式

##很多年前的前端,是什么样子?

##补充一下

###Node

SDK(software develop kit):Node jdk()

IDE(集成dev env):VSCode

####有了npm,我们就可以创建一个工程环境

npm - 理解成一个包管理下载的工具

每一个npm管理的工程下面,都会有一个文件,叫做package.json

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

在package.json中的命令行,会自动去你./node_modules/bin这个路径中去找.

##这么多年,前端没什么变化,浏览器还是只认三大件.

##现代前端开发框架

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

简单脚本:

       (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是项目名