开发笔记:java后端的前端第一课

一.NPM

1.认识&＃xff1a;

npm 是node包管理器&＃xff0c;是node.js 默认的&＃xff0c;用js编写的。

安装&＃xff1a;

• 安装好node后&＃xff0c;会默认安装好npm
• npm -v 检查
• 更新安装时&＃xff0c;install npm -o

使用

• 在哪个目录下安装&＃xff0c;就会安装到哪里

• npm config get registry 来获取现在的镜像

• 修改镜像

  npm config set registry https://registry.npm.taobao.org

2.在webstorm中使用npm

在终端中使用&＃xff0c;一般网站都会有相应的命令&＃xff0c;直接复制使用

例如bootstrap&＃xff1a;

npm install bootstrap


卸载&＃xff1a;

3.配置文件详解

初始化npm的时候&＃xff0c;我们用了npm init -y或者npm init --yes&＃xff1b;
-y或者–yes表示所有的配置项都是使用默认值。
如果不添加-y或者–yes&＃xff0c;就会问很多问题&＃xff0c;这些问题&＃xff0c;我们叫npm的配置项。

• package name:
  当npm初始化了&＃xff0c;在我们看来是一个项目&＃xff0c;在它眼里是一个包&＃xff0c;所以这里要输入这个包的名称。
  注意&＃xff1a;包名中间不能有空格&＃xff0c;并且必须要小写。

• version&＃xff1a;
  包的版本号&＃xff0c;默认是1.0.0

• description&＃xff1a;
  描述&＃xff0c;可以写也可以不写

• entry point:
  包的入口文件

• test command&＃xff1a;
  命令

• git repository&＃xff1a;
  git 仓库

• keywords&＃xff1a;
  关键词

• author&＃xff1a;
  作者
  之后就会创建一个package.json,这个json文件里面就是上面填写的配置项。
  如果用npm init -y或者npm init --yes来初始化&＃xff0c;我可以在这个json文件里面更改。

  {
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}


  注意&＃xff1a;
  这个json里面有一项scripts&＃xff0c;用于指定一些命令的快捷方式。
  如上面有个

  "scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
}


  那我们可以运行上面定义的命令。

  npm run test


  一般我们也可以在这个script里面自定义一些命令&＃xff0c;指定了什么命令就可以跑什么命令。

4.安装的包的使用

const $&＃61;require(&＃39;bootstrap&＃39;)


二、webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析&＃xff0c;然后将这些模块按照指定的规则生成对应的静态资源。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用&＃xff0c;它们拥有着复杂的Javascript代码和一大堆依赖包。为了简化开发的复杂度&＃xff0c;前端社区涌现出了很多好的实践方法

• 模块化&＃xff0c;让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在Javascript基础上拓展的开发语言&＃xff1a;使我们能够实现目前版本的Javascript不能直接使用的特性&＃xff0c;并且之后还能转换为Javascript文件使浏览器可以识别&＃xff1b;
• Scss&＃xff0c;less等CSS预处理器
• …

这些改进确实大大的提高了我们的开发效率&＃xff0c;但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的&＃xff0c;这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包机&＃xff1a;它做的事情是&＃xff0c;分析你的项目结构&＃xff0c;找到Javascript模块以及其它的一些浏览器不能直接运行的拓展语言&＃xff08;Scss&＃xff0c;TypeScript等&＃xff09;&＃xff0c;并将其转换和打包为合适的格式供浏览器使用。

后端的理解

Webpack 是一个前端资源的打包工具&＃xff0c;它可以将js、image、css等资源当成一个模块进行打包。

webpack是一个打包工具&＃xff0c;类似于maven&＃xff0c;有一个配置文件package.json 好比maven的pom.xml 你写好依赖&＃xff0c;一个命令他帮你下载好需要的模块。

学习Webpack&＃xff0c;你需要先理解四个核心概念&＃xff1a;

• 入口(entry)

  webpack打包的启点&＃xff0c;可以有一个或多个&＃xff0c;一般是js文件。webpack会从启点文件开始&＃xff0c;寻找启点直接或间接依赖的其它所有的依赖&＃xff0c;包括JS、CSS、图片资源等&＃xff0c;作为将来打包的原始数据

• 输出(output)

  出口一般包含两个属性&＃xff1a;path和filename。用来告诉webpack打包的目标文件夹&＃xff0c;以及文件的名称。目的地也可以有多个。

• 加载器&＃xff08;loader&＃xff09;

  webpack本身只识别Js文件&＃xff0c;如果要加载非JS文件&＃xff0c;必须指定一些额外的加载器&＃xff08;loader&＃xff09;&＃xff0c;例如css-loader。然后将这些文件转为webpack能处理的有效模块&＃xff0c;最后利用webpack的打包能力去处理。

• 插件(plugins)

&＃xff0c;以及文件的名称。目的地也可以有多个。

• 加载器&＃xff08;loader&＃xff09;

  webpack本身只识别Js文件&＃xff0c;如果要加载非JS文件&＃xff0c;必须指定一些额外的加载器&＃xff08;loader&＃xff09;&＃xff0c;例如css-loader。然后将这些文件转为webpack能处理的有效模块&＃xff0c;最后利用webpack的打包能力去处理。

• 插件(plugins)

  插件可以扩展webpack的功能&＃xff0c;让webpack不仅仅是完成打包&＃xff0c;甚至各种更复杂的功能&＃xff0c;或者是对打包功能进行优化、压缩&＃xff0c;提高效率。