2019-06-23模块化开发

作者: 啊_6424 | 来源:发表于2019-06-24 00:05 被阅读0次

nrm工具

nrm的作用：提供一些最常用的NPM包镜像地址，能够快速地让我们切换安装包时候的服务器地址。
什么是镜像：原来包刚开始就只存在于国外的NPM服务器上，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网一模一样的服务器，只不过，数据都是从人家那里拿来的，除此之外，使用方式完全一样：

1.运行npm i nrm -g全局安装nrm包
2.使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址
3.使用nrm use npm 或者nrm use taobao切换不同的镜像源地址

注意:

nrm只是单纯的提供了几个常用的下载包的地址，方便我们进行地址的切换，但是，我们每次装包的工具都是npm
我们有时候会用npm i cnpm -g装cnpm包，这里的cnpm 跟nrm ls 中的cnpm不一样。我们不能说用nrm装包，它只是切换地址
如果想用cnpm去下载包的话，要先用npm i cnpm -g装cnpm包，以后就可以用cnpm下载包（cnpm i jquery -save）

webpack

通常在我们的网页中会引用一些静态资源，比如:

JS
- .js ，.jsx ，.coffee（中间语言），.ts(TypeScript，这是一种中间语言，可以用他们写出类似JS的代码，但是并不能在浏览器里边运行，如果想运行则需要一个编译器把中间语言编译成JS语言)
- 没事的时候可以去看看TypeScript，里边有一些新特性，它是微软出的，和微软的类 C#（读作：C SHARP）语言有点像
CSS
- .css ，.less， .sass（这是老版的，新版的后缀名为.scss，改版的原因是因为.sass的写法别扭），.scss
Images
- .jpg ，.png，.gif，.bmp，.svg
字体文件（Fonts）
- .svg，.ttf，.eot，.woff，.woff2
模板文件
- .ejs，.jade，.vue（这是在webpack中定义组件的方式，推荐使用）

当网页中引入的静态资源文件很多时，会导致：

1.网页加载速度变慢，因为我们要发起很多的二次请求：一个网页想要展示出来的话，第一步就是URL栏输入地址，接下来，浏览器主动向服务器发起请求，拿页面，服务器把html页面代码返回给浏览器，注意这里只有html代码；接下来，浏览器从上到下解析并渲染html里面的每一个标签，（比如说）当解析到script标签，里面有了src属性的时候，浏览器会根据src发起二次请求。。。。直到解析完毕。
2 .要处理错综复杂的依赖关系，例如bootstrap.js依赖jquery.js

如何解决这两个问题呢？

1.对于问题一，对于JS和CSS可以：合并，压缩；图片可以精灵图（合并为一张图），图片的Base64编码（把图片的src改成Base64编码，第一个请求页面的时候跟着一起被下载到客户端，但适用于小图片）

对于第二个问题，可是使用requireJS，也可以使用webpack解决各个包之间的复杂依赖关系

完美的解决上述两个问题：

1.使用Gulp: Gulp是基于task任务的，小巧灵活方便进行小型的创建。
2.使用webpack: 是基于整个项目进行构建的
- 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并，压缩，打包，混淆等诸多功能。
- 根据官网的介绍图片webpack打包的过程
- webpack官网

打个比喻：我们的项目是地球，那么Gulp就相当于珠穆朗玛峰，能扫视周边，哪儿需要扫视就建个task任务（即珠穆朗玛峰）。Webpack相当于卫星，能扫视整个项目。

什么是webpac

webpack是前端的一个项目构建工具，它是基于Node.js开发出来的前端工具

webpack的安装方式

1.运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2.在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

使用webpack

实现一个案例————斑马栏。
1.先新建一个项目

目录结构

main.js，是我们项目的入口文件
index.html是我们的首页
2.npm init -y初始化项目

多了一个这个文件

npm i jquery -s给项目安装jquery

安装成功

4.让页面能用上jquery

注意不推荐在<head>标签里面直接引用包或者css文件

<script src="node_modules/jquery/dist/jquery.min.js"></script>//不推荐这样，因为还是发起了请求

那怎么办呢？把所有的需要的在main.js中引入一下。

//导入jquery包
//import from 是ES6中导入其他模块的方式
import $ from "jquery";//导入jquery包，用$接收

$(function(){
  $("li:odd").css("backgroundColor","lightblue");
  $("li:even").css("backgroundColor",function(){
    return "#"+ "D97634";
  });
});

5.布局代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <script src="./node_modules/jquery/dist/jquery.min.js"></script> -->
  <script src="./main.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
      <li>这是第9个li</li>
      <li>这是第10个li</li>
    </ul>
  </div>
</body>
</html>

运行结果就是报错了😭

原来啊！是因为ES6的语法太高级了，浏览器解析不了

6.使用webpack
npm i webpack -D安装到项目里（也可以安装到全局里面）
webpack ./src/main.js ./dist/bundle.js将main.js打包成bundle.js

  <!-- <script src="./main.js"></script> -->
  <script src="../dist/bundle.js"></script>

这样改过后，案例就实现了。
但是吧，老师的webpack是3.6版的，我用的是4.x版的，我用老师的这种方法各种报错。emmmmmm，重在理解原理，弄懂内涵就OK了😂

经过刚才的演示，webpack可以做的事情：

1.webpack能够处理js文件之间的互相依赖关系，表示整个网站页面只需要一个main.js的文件（理想状态，真实开发不会这么做）
2.webpack能够处理 JS的兼容性，把不兼容的高级语法转换为低级的能让浏览器解析的语法。

webpack的配置文件的使用——webpack.config.js

在上面的例子上，若我们修改了main.js里的jQuery函数颜色设置值，页面不会有变化。因为index.html引用的是bundle.js，bundle.js此时并没有变化。此时，应该再打包一次以更新bundle.js里的相关的值。就有得写一次webpack打包的语法，这有点麻烦，我们可以通过webpack的配置文件去解决这一问题。
查了查，可是我无论怎么改我的webpack都是报错，我还怎么学呀！😭😭😭

以下有关webpack内容纯记笔记，没法实操了，webpack弄不好了！🙂

将webpack.config.js写在根路径下。在里边定义出口，入口，入口指要打包的文件路径，出口指打包好的输出文件的路径。

// 这个配置文件，其实就是一个 JS 文件，通过Node中的模块操作，向外暴露一个打包的配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// 那些 特性 Node 支持呢？Node是基于Chrome V8引擎实现的Javascript运行环境，如果 chrome 浏览器支持哪些，则 Node 就支持哪些；
const path = require("path");
module.exports = {
  entry: path.join(__dirname, "./src/main.js"),//入口，表示要使用 webpack 打包哪个文件
  output: {//输出文件的相关配置
    path: path.join(__dirname, "./dist"),//指定打包好的文件，输出到哪个文件夹下面去 
    filename: "bundle.js"//指定输出文件 的对应名称
  }
}

当我们在控制台直接输入webpack执行时，走了以下几步：
1.当webpack发现我们并没有指定入口和出口，就会去项目根目录中找配置文件webpack.config.js
2.找到了之后，webpack会去解析并执行这个文件，得到一个配置对象
3.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，就打包构建

webpack-dev-server工具

现在的这个项目，当我们修改颜色后，控制台执行一下webpack就重新打包一次，页面就会刷新。我们项目的代码经常修改，修改一次就得打包一次，如此麻烦。我们可以使用webpack-dev-server解决这一问题——监听到代码改变就自动打包。
1.运行npm i webpack-dev-server -D把这个工具下载到项目的本地开发依赖
2.安装完毕后，这个工具的用法和webpack 命名的用法，完全一样。
3.由于是在本地（项目）中安装的，所以无法把它当作脚本命名在powershell终端中运行，（只有那些安装到全局（-g）才能在终端中执行）
4.我们可以通过设置命名来进行项目构建
5.这个工具依赖于webpack，而且要求项目里得先安装webpack:npm i webpack -D哪怕全局已经安装过了wabpack
6.<script src="/bundle.js"></script>对应的路径改为这样
7.webpack-dev-server帮我们打包生成的bundle.js文件并没有存到实际的物理磁盘上；而是，直接托管到了电脑的内容中，所以我们在项目的根目录中根本找不到这个打包文件。我们可以认为webpack-dev-server这个工具把打包好的文件以一种虚拟的形式托管到了项目的根目录中，虽然我们看不到他，但他与dist，src平级。
8.那么他为什么不放到实际的物理内容中去呢？为了速度，这样更快

webpack-dev-server的命令

第一种方式

注意，每当改变了package.json文件时，需要重启服务器。
package.json
"dev": "webpack-dev-server --open"表示自动打开浏览器
"dev": "webpack-dev-server --open --port 3000"自动打开浏览器，端口号为3000
"dev": "webpack-dev-server --open --port 3000 --contentBase src"……默认打卡src路径（下面有个Index.html，会默认打开这个文件）
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"……没有使用--hot的时候，每ctrl + s一次就生成了一个新的bundle.js，而使用了--hot后，每ctrl + s就更新一下修改的地方。

image.png
--hot可以实现页面的不重载

webpack-dev-server配置命令的第2种方式

在"dev"里边不写指令，移植到webpack.config.js文件中去。

"dev": "webpack-dev-server"

const path = require("path");
//启用热更新的第二步
const webpack = require("webpack");
module.exports = {
  entry: path.join(__dirname, "./src/main.js"),//入口，表示要使用 webpack 打包哪个文件
  output: {//输出文件的相关配置
    path: path.join(__dirname, "./dist"),//指定打包好的文件，输出到哪个文件夹下面去 
    filename: "bundle.js"//指定输出文件 的对应名称
  },
  devServer:{
    //配置dev-server命令参数
    //--open --port 3000 --contentBase src --hot
    open: true,//自动打开浏览器
    port:3000,//设置启动时候的运行端口
    contentBase: "src",//指定托管的根目录
    hot:true//启动热更新的第一步
  },
  plugins:[//配置插件的的节点
    new webpack.HotModuleReplacementPlugin()//new 一个热更新的 模块对象，启用热更新的第三步

  ]
}

html-webpack-plugin的两个基本作用

现在，我们的bundle.js是在内存中的，但我们的页面index.html是在物理磁盘上的，若我们想让浏览器访问的页面也在内存里，则需要借助html-webpack-plugin。
另外使用contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，也可使用html-webpack-plugin插件配置启动页
面。
自动把打包好的bundle.js文件追加到index.html页面中去。

1.运行cnpm i html-webpack-plugin --D安装到开发依赖
2.修改webpack.config.js配置文件如下：

  // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, './src/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, './dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, './src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

3.修改package.json中script节点中的dev指令如下：
"dev": "webpack-dev-server"
4.将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中

webpack打包CSS

webpack打包less

webpack打包sass

power shell终端的命令：cls(清空内容)，全局安装的依赖包如npm,webpack,cnpm，