NPM一Node包管理和分发工具

欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot

NPM 全称 Node Package Manager

Node包管理和分发工具，可以把NPM理解为前端的Maven

我们通过npm可以很方便地下载js库，管理前端工程

最近版本的node.js已经集成了npm工具

NPM命令

npm init

    按照提示输入相关信息，如果是用默认值则直接回车即可：
        name: 项目名称
        version: 项目版本号
        description: 项目描述
        keywords: {Array}关键词，便于用户搜索到我们的项目

    最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml


本地安装：install命令用于安装某个模块
    npm install express

全局安装：使用全局安装会将库安装到全局目录下
    npm install jquery -g


批量下载
    进入目录（package.json所在的目录）输入命令：npm install


淘宝NPM镜像

    安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

    使用：cnpm install 需要下载的js库


不安装 cnpm 只用淘宝镜像，设置 npm 的镜像：

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

执行下面的命令，确认是否切换成功：

    $ npm config get registry


运行工程
    npm run dev

    dev是开发阶段测试运行
    build是构建编译工程
    lint 是运行js代码检测

Webpack：模块和打包

Webpack 是一个前端资源加载/打包工具：
    Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求


Webpack配置：

	JS打包：

	    1，创建src文件夹，在src文件夹下编写js文件（logic.js）

	    	//commonjs的模块化规范
	        module.exports = {
	            add:function() {}
	        }

	        //ES6的模块化规范
	        export const add = function() {}

	    2，src下创建main.js

	        //commonjs的模块化规范
	        const {add} = require('./logic.js');
	        console.log(add(100, 200));

	        //ES6的模块化规范
	        import {add} from "./logic.js";
	        console.log(add(100, 200));

	    3，创建配置文件webpack.config.js ，该文件与src处于同级目录

	        const path = require("path");
	        module.exports = {
	            entry: './src/main.js',	//入口
	            output: {	//出口
	                path: path.resolve(__dirname, './dist'),
	                filename: 'bundle.js'
	            }
	        };

	        读取当前目录下src文件夹中的main.js（入口文件）内容，
	        把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

	    4，执行编译命令：webpack

	    5，引入：<script src="./dist/bundle.js"></script>


	CSS打包：

	    1，安装 style-loader（将样式添加到DOM中） 和 css-loader（加载）
	        cnpm install style-loader css-loader --save-dev

	    2，webpack.config.js

	        const path = require("path");
	        module.exports = {
	            entry: './src/main.js',    
	            output: {    
	                path: path.resolve(__dirname, './dist'),        
	                filename: 'bundle.js'        
	            },    
	            module: {
	                rules: [
						{
							test: /\.css$/,
							use: ['style-loader', 'css-loader']	//有顺序，从右到左
						}
	                ]
	            }
	        };

	    3，运行webpack

详情请见https://www.webpackjs.com/loaders/#样式