Node.js npm
什么是Node.js 以及npm
簡(jiǎn)單的來說 Node.js 就是運(yùn)行在服務(wù)端的JavaScript鸽照，基于Chrome V8 引擎的。
npm 是Node.js 的包管理工具。
npm的安裝和更新
Node.js下載安裝 Node.js 官網(wǎng)下載安裝淫痰。npm自帶的包管理工具把介。
查看安裝版本信息：
-- node -v 查看Node.js 版本信息
-- npm -v 查看npm版本信息
更新npm到指定版本：
-- npm install npm@5.3.0 -g
-- npm install npm@latest -g 更新最新的穩(wěn)定版本
npm 常用操作
之前我們用JQuery或者Bootstrapyongcdn 或者直接手動(dòng)下載放入項(xiàng)目，而且要管理版本厢漩。
有了npm膜眠，我們管理自己的依賴包就更加方便簡(jiǎn)單。
到自己的項(xiàng)目目錄下溜嗜，進(jìn)行以下命令：
-- npm init -y 輸入 -y 使用默認(rèn)配置項(xiàng)宵膨，生成package.json文件。
-- npm i jquery@0.0.0 簡(jiǎn)寫install 為 i 炸宵，不寫@默認(rèn)最新版本
-- npm uninstall jquery 卸載
-- npm update jquery 更新
-- npm list 列出已安裝的依賴包
-- npm install webpack -D 保存為開發(fā)環(huán)境依賴
我們的項(xiàng)目目錄下會(huì)生成一個(gè) node_modules 目錄辟躏，我們用npm下的包會(huì)在這個(gè)目錄下。
我們所有的依賴信息放在package.json文件中土全，包括我們所有的依賴以及版本捎琐。
如果我們不小心刪掉 node-modules目錄，可以使用 npm i 來下載所有依賴裹匙。
npm 常用配置項(xiàng)
當(dāng)我們用npm init 的時(shí)候用了參數(shù) -y瑞凑，如果不用-y我們可以進(jìn)行一些配置。
在我們的package.json文件中有很多配置項(xiàng)
-- name 項(xiàng)目名字 中間不能有空格只能用小寫
-- version 項(xiàng)目版本
-- description 項(xiàng)目描述信息
-- main 項(xiàng)目的入口文件
-- scripts 指定命令的快捷方式 npm run test test是scripts里的鍵名 值為具體命令
-- author 作者
-- license 許可證
-- dependencies 生成環(huán)境依賴的包以及版本信息
-- devDependencies 開發(fā)環(huán)境的依賴
webpack3
webpack是什么
webpack是一個(gè)模塊打包器概页，它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析拨黔，
然后將這些模塊按照指定的規(guī)則生成靜態(tài)資源。
安裝和配置
webpack是跑在Node.js環(huán)境下的绰沥，所以確定自己有node環(huán)境篱蝇。
安裝方式：
-- npm install webpack -g 全局安裝
-- webpack <要打包文件> <打包后文件> 全局這種方式進(jìn)行打包
-- npm install webpack 在自己的項(xiàng)目下 npm init 后在下載webpack 這就是局部安裝
-- node_modules/.bin/webpack <要打包文件> <打包后文件> 項(xiàng)目里要打包文件是入口文件
-- 路徑太長(zhǎng) 太煩 可以自定義命令 在package.json 文件的 scripts下面自定義
entry 和 output
entry 入口文件 output 出口文件
上面我們自定義命令的時(shí)候 命令太長(zhǎng)了而且我們命令太多的時(shí)候我們需要每次都自定義多條命令
我們可以把命令寫在webpack.config.js文件中~~
module.export = {
// 所有的入口文件
entry: {
home: './main.js',
login: './login.js',
},
// 出口文件
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist',
}
}
// backage.json 下的scripts
scripts: {
"pack": "node_moudles/.bin/webpack --watch"
}
// 運(yùn)行命令
npm run pack
webpack4
webpack的新特性
1, webpack不在單獨(dú)使用，需要webpack-cli
-- 全局安裝 npm install webpack webpack-cli -g -D
-- 局部安裝 npm install webpack webpack-cli -D
2, 增加了模式區(qū)分 （development, production）
--webpack --mode development/production 進(jìn)行模式切換
-- development 開發(fā)者模式 打包默認(rèn)不壓縮代碼
-- production 生產(chǎn)者模式 上線時(shí)使用徽曲，壓縮代碼零截。 默認(rèn)是這個(gè)模式
3，固定入口目錄為src秃臣，與入口默認(rèn)文件index.js涧衙，打包后文件在新增的dist目錄下
-- 當(dāng)只有一個(gè)入口文件也就是src/index.js時(shí)，無需增加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是官方提供的快速構(gòu)建這個(gè)單頁面應(yīng)用的腳手架弧哎。
根據(jù)官方文檔中的構(gòu)件流程：
-- 前提是已經(jīng)安裝了node.js 否則npm都用不了
-- 1，使用npm全局安裝vue-cli
npm install -g vue-cli
-- 2, 安裝完成后在自己的工作空間里
vue init webpack vue-demo
輸入命令后進(jìn)入安裝階段稚虎，需要用戶輸入一些信息 這里省略了.....
-- 3撤嫩，切換到我們的項(xiàng)目目錄下
cd vue-demo
npm run dev
目錄結(jié)構(gòu)：
-- build 里面是一些操作文件，使用npm run * 時(shí)其實(shí)執(zhí)行的就是這里的文件
-- config 配置文件蠢终，執(zhí)行文件需要的配置信息
-- src 資源文件 所有的組件以及所有的圖片 都在這個(gè)文件夾下
-- node_modules 項(xiàng)目依賴包
-- static 靜態(tài)資源
-- package.json 依賴包的json文件
vue-cli配置Jquery序攘、Bootstrap
第一步茴她、下載：
-- npm install jquery
-- npm install bootstrap
第二步、修改build/webpack.base.conf.js
const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
// Popper: ['popper.js', 'default']
})
],
// *******下面是如果手動(dòng)下載bootstrap用的*******
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 如果是手動(dòng)下載的bootstrap需要添加這個(gè)配置
// 'assets': path.resolve(__dirname, '../src/assets'),
// 'jquery': 'jquery/src/jquery'
}
},
第三部程奠、修改主程序的js文件 main.js：
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
