node.js、npm、cnpm、webpack的定义与关系

75 阅读 0 评论 50 点赞

我是靠谱客的博主自由小白菜，最近开发中收集的这篇文章主要介绍node.js、npm、cnpm、webpack的定义与关系，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

由于今天新接触了许多软件和一些新名词，避免自己日后混乱，现在简单描述一下它们之间的关系

node.js（一个前端的开发环境）:

菜鸟教程：

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

摘自文章片段（ https://www.zhihu.com/question/33578075知乎文章）

这是一种通过JavaScript语言开发web服务端的东西”。如果这种晦涩解释还没把你搞晕，你没准会接着问：“为什么我们要用node.js？”，别人一般会告诉你：node.js有非阻塞，事件驱动I/O等特性，从而让高并发（high concurrency）在的轮询（Polling）和comet构建的应用中成为可能。

npm（安装依赖js包）

因为node.js也有许多依赖的js包，所以要有一个像maven一样的管理来管理这些js包，而npm就是这样的功能

cnpm

npm默认向国外网站拉取js包依赖，难免下载的慢，所以cnpm是一个国内版的npm，是替代npm的程序把， cnpm用的是淘宝的镜像

webpack（通过npm(cnpm)下载）

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

使用webpack有什么好处呢？
1、模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
2、编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。

打包过程：
例：将vue01.html的js进行打包

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>vue.js入门程序</title>
 <script src="./vue.min.js"></script>
//<script src="./jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- {{name}} -->
        <span v-text="name"></span>
        <input type="text" v-model.number="num1"> + 
        <input type="text" v-model.number="num2"> = 
        <span v-text="result"></span>
        
        <button @click="abc">计算</button>
        <!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据
        这些指令就相当于是MVVM中的View这个角色 ‐‐>
        <ul>
            <!‐‐只显示偶数行‐‐>
            <li v-for="(item, index) in list ">{{item}}--{{index}}</li>
            <li v-for="(value,key) in user">{{key}}:{{value}}</li>
            <li v-for="item in userlist">
                <div v-if="item.user.name== 'huang1'" style="color:red">{{item}}</div>
                <div v-else="" style="color:green">{{item}}</div>
            </li>
        </ul>
    </div>
    <script src="./build.js"></script>
  <script>
      //  $(function(){
                // 实例化Vue对象
            //vm :叫做MVVM中的 View Model
            var VM1 = new Vue({
            el:"#app",//表示当前vue对象接管app的div区域
            data:{
                name:'黑马程序员',// 相当于是MVVM中的Model这个角色
                num1:'',
                num2:'',
                result:'',
                list:[1,2,3,4,5],
                user:{name:"huang", age:10},
                userlist:[ 
                    {user:{name:"huang1", age:10}},
                    {user:{name:"huang2", age:20}},
                    {user:{name:"huang3", age:30}}
                ]
            },
            mounted:function() {
                // alert("VM1");
            },
            methods:{
                abc: function(){
                    alert("计算");
                    this.result = this.num1 + this.num2;
                }
            }
            });
        
        //})
       
        
        </script> 
</body>
</html>

一、创建mode01.js文件

var add = function(x, y){
    return x + y;
}

var add1 = function(x, y){
    return x + y;
}

// 导出add方法
// module.exports.add = add;
// module.exports.add2 = add2;
module.exports ={add};//如果有多个方法这样导出

二、创建main.js文件

// main.js表示webpack程序开启的程序入口
// 先导入需要打包的文件
var {add} = require("./model01.js");
var Vue = require("./vue.min.js");

// 把打包文件的Js复制到此处
var VM1 = new Vue({
    el:"#app",//表示当前vue对象接管app的div区域
    data:{
        name:'黑马程序员',// 相当于是MVVM中的Model这个角色
        num1:'',
        num2:'',
        result:'',
        list:[1,2,3,4,5],
        user:{name:"huang", age:10},
        userlist:[ 
            {user:{name:"huang1", age:10}},
            {user:{name:"huang2", age:20}},
            {user:{name:"huang3", age:30}}
        ]
    },
    mounted:function() {
        // alert("VM1");
    },
    methods:{
        abc: function(){
            // alert("计算");
            this.result = add(this.num1, this.num2);
            // this.result = this.num1 + this.num2;
        },
        acc: function(){
            alert("22222");
            // this.result = this.num1 + this.num2;
        }
    }
});

三、进入文件目录下：
在这里插入图片描述
该文件目录下cmd打开命令窗口输入: webpack main.js build.js

执行成功后就会生成一个build.js文件

四、测试打包的js文件：
将vue01.html的js代码注释掉，引入 build.js 文件