node.js 和 npm
什么是node.js 和 npm :
简单的说 node.js 就是运行在服务端的JavaScript, 基于Chrome V8引擎的.
npm 是 node.js 的包管理工具.
npm的安装和更新 :
node.js官网下载安装, next到最后. npm是自带的包管理工具.
查看版本信息:
node -v 查看node.js版本信息
npm -v 查看npm版本信息
更新npm到指定版本:
npm install npm@5.3.0 -g
npm install npm@latest -g 更新到最新的稳定版本
npm的常用操作 :
之前所用的Jquery或者Bootstrap用cdn或者直接手动下载并放入项目, 而且要管理版本.
有了npm, 我们管理自己的依赖包以及更加简单.
进入到自己的项目下, 进行一下命令:
npm init -y 输入-y使用默认配置项生成package.json文件.
npm i jquery@0.0.0 简写install为 i 下载依赖 不写@默认最新版本.
npm uninstall jquery 卸载依赖包
npm update iquery 更新依赖包
npm list 列出已安装的依赖
npm install webpack --D 保存为开发环境依赖
老版本需要 --save 参数 新版本不需要
项目目录下会生成一个node_modules目录, 使用npm下的包会在这个目录下.
所有的依赖信息放在package.json文件中, 包括需要的所有依赖以及版本.
如果闪电node_modules目录, 可以使用 npm i 来下载所有依赖.
npm常用配置项 :
当用npm init的时候用了参数 -y, 如果不用-y可以进行一些配置.
在package.json文件中有很多配置项
name 项目名字 中间不能有空格而且只能用过小写.
version 项目版本
descruption 项目描述信息
main 项目入口文件
scripts 指定命令的快捷方式npm run test test是script里的键名 值为具体命令
author 作者
license 许可证
dependencies 生成环境依赖的包以及版本信息
devDependencies 开发环境的依赖
webpack3 :
webpack是什么 :
webpack是一个模块打包器, 它将根据模块的依赖关系进行静态分析.
然后将这些模块按照指定的规则生成静态资源.
安装和配置 :
webpack是跑在node.js环境下的, 所以确定自己有node环境.
安装方式:
npm install webpack -g 全局安装
webpack <要打包文件><打包后文件> 全局这种方式进行打包
npm install webpack 在自己的项目下npm init后在下载webpack 这就是局部安装
node_modeules/.bin/webpack<要打包文件><打包后文件> 项目里要打包文件是入口文件
某些路径过长比较繁琐, 可以在自定义命令 在package.json文件的script下自定义
entry 和 output :
enrty 入口文件 output 出口文件
webpack4 :
webpack的新特性 :
1. webpack不再单独使用, 需要webpack-cli
全局安装 npm install webpack wenpack-cli -g -D
局部安装 npm install webpack webpack-cli -D
2. 增加了模式区分(development, production)
webpack --mode development/production 进行模式切换
development 开发者模式 打包默认不压缩代码
production 生产者模式, 上线时使用, 压缩代码. 默认是此模式
3. 固定入口目录为src, 与入口默认文件index.js, 打包后文件在新增的dist目录下
当只有一个入口文件也就是src/index.js时, 无需增加webpack.config.js
4. 多入口以及多出口
entry: {
// 多入口
a: "./src/js/index.js",
b: "./src/js/index2.js",
}
output: {
// 多出口
path: path.resolve(__dirname, 'dist'),
filename: './js/[name].bundle.js'
}
vue-cli基本配置命令 :
vue-cli是官方提供的快速构建这个单页面应用的脚手架.
根据官方文档中的构建流程 :
前提是安装好了node.js
1. 使用npm全局安装 vue-cli
npm install -g vue-cli
2. 安装完成后在自己的工作空间内
vue init webpack vue-demo
输入命令之后进入安装阶段, 需要用户输入一些信息
3. 切换到项目目录下
cd vue-demo
npm run dev
目录结构 :
bulid 里面是一些操作文件, 使用npm run *时其实执行的就是这里的文件
config 配置文件, 执行文件需要的配置信息
src 资源文件, 所有的组件以及所有的图片都在这个文件夹下
node-modules 项目依赖包
static 静态资源
package.json 依赖包的json文件
vue-cli 3.0 :
1. 下载vue-cli 3.0
npm install -g @vue/cli
报错npm error 可以运行下面命令
npm cache clean --force && npm cache verify
2. 创建项目
vue create xxxx
之后会出现很多选项, 我们可以根据自己的习惯去选择
3. 目录结构以及配置文件
vue-cli 3 目录更加简单
可以手动在项目根目录下创建 vue.config.js 里面写vue的配置信息.
vue-cli配置Jquery, bootstarp :
1. 下载安装 :
npm install jquery
npm install bootstarp
2. 修改bulid/webpack.base.conf.js :
const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
// Popper: ['popper.js', 'default']
})
],
// *******下面是如果手动下载bootstrap用的*******
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 如果是手动下载的bootstrap需要添加这个配置
// 'assets': path.resolve(__dirname, '../src/assets'),
// 'jquery': 'jquery/src/jquery'
}
},
3. 修改主程序的js文件main.js
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'