【NPM】
npm(Node Package Manager):Node包管理工具,Node自带NPM;
核心思想:代码仓库,在里面放所有需要被共享的代码;
代码共享:
1.早期主要靠网址共享代码;(bootcdn.cn)
2.github兴起之后使用github上的下载功能;
3.现在使用NPM;
NPM使用:
1.打开Node官网,下载Node;
2.打开cmd命令提示符,进入目标文件夹;
3.npm -v(--version) 查看版本信息;
4.npm init -y(--yes) 初始化默认配置文件
5.npm i(install) vue/vue@2.6.0 -S(--save)/-D(--save-dev)/-g(--global)
安装包(默认最新版本、默认-S(--save);不能同时存在一个包的多个版本,会被替换)
6.npm uninstall vue 卸载包
7.npm update vue 更新包
8.npm info vue 查看包的版本
9.npm install 根据package、package.lock恢复包
10.npm list 查看已安装的所有包
package.json文件:
{
"name": "NPM", //应用名
"version": "1.0.0", //应用版本
"description": "", //应用描述
"main": "index.js", //程序的主入口文件
"scripts": { //命令的快捷方式(可通过npm run test运行)
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //关键字
"author": "", //作者
"license": "ISC", //许可证
"dependencies": { //生产环境下的依赖包
"vue": "^2.6.10"
}
}
package.lock.json文件:锁定各包的具体版本号,由于package.json只能锁定大版本号;
【CNPM】
cnpm:淘宝镜像,由淘宝前端开发,中国的NPM,由于NPM服务器在国外,导致下载速度慢且易出现异常; 1.npm i cnpm -g --registry=https://registry.npm.taobao.org 在全局环境下安装CNPM 2.与NPM的区别:npm i vue 默认-S(--save),CNPM需要手动添加;
【Bower】
bower:也是一款包管理工具,安装依赖NPM;
与NPM的区别:Bower是专门针对前端的包管理工具;
NPM包含前端和Node.js的包管理;
Bower使用:
1.npm install bower -g 在全局环境下安装Bower
2.bower i vue#2.6.8 安装包
3....其它用法与NPM相同
【webpack】
webpack:模块化打包工具;现在主流前端框架(Vue、React、Angular)的理想开发环境都是基于webpack;
webpack使用:
1.npm i webpack@3.12.0 -g 全局安装(4.x中webpack和webpack-cli分开管理)
2.npm init -y 初始化配置文件
3.npm i webpack@3.12.0 -D 局部安装(避免因电脑安装的webpack版本不同,导致的全局webpack的影响)
4.在目标文件夹新建webpack.config.js
let path = require('path');
module.exports={
entry:"./a",
output:{
filename:"bundle.js",
path:path.resolve(__dirname, 'dist/')
}
}
5.webpack 完成打包