Node.js? ?npm

什么是Node.js? 以及npm

簡單的來說 Node.js 就是運行在服務端的JavaScript，基于Chrome V8 引擎的。

npm 是Node.js 的包管理工具。

npm的安裝和更新

Node.js下載安裝? ?Node.js 官網下載安裝。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 jquery? ?更新依賴包

　　-- 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? 項目版本

　　-- description? ?項目描述信息

　　-- main? 項目的入口文件

　　-- scripts 指定命令的快捷方式 npm run test? ? ?test是scripts里的鍵名 值為具體命令

　　-- author 作者

　　-- license? 許可證

　　-- dependencies? 生成環境依賴的包以及版本信息

　　-- devDependencies? 開發環境的依賴

webpack3

webpack是什么

webpack是一個模塊打包器，它將根據模塊的依賴關系進行靜態分析，

然后將這些模塊按照指定的規則生成靜態資源。

那么，我們為什么要用這個東西呢~~因為前端的包袱太多，歷史遺留問題太重~~~腦補吧......

安裝和配置

webpack是跑在Node.js環境下的，所以確定自己有node環境。

安裝方式：

　　-- npm install webpack -g? 全局安裝

　　-- webpack? <要打包文件>? <打包后文件>? ? ?全局這種方式進行打包

　　-- npm install webpack? ?在自己的項目下 npm init 后在下載webpack 這就是局部安裝

　　-- node_modules/.bin/webpack?<要打包文件>? <打包后文件>? ?項目里要打包文件是入口文件

　　-- 路徑太長 太煩 可以自定義命令? 在package.json 文件的 scripts下面自定義

entry 和 output

entry 入口文件? output 出口文件

上面我們自定義命令的時候 命令太長了~~而且我們命令太多的時候我們需要每次都自定義多條命令~~

我們可以把命令寫在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" }// 運行命令 npm run pack webpack.config.js

webpack4

webpack的新特性

1, webpack不在單獨使用，需要webpack-cli

　　-- 全局安裝 ?npm install webpack webpack-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' } webpack.config.js　　

vue-cli

vue-cli是官方提供的快速構建這個單頁面應用的腳手架。

根據官方文檔中的構件流程：

　　-- 前提是已經安裝了node.js 否則npm都用不了

　　-- 1，使用npm全局安裝vue-cli?

　　　　　　npm install -g vue-cli

　　-- 2, 安裝完成后在自己的工作空間里

　　　　　　vue init webpack vue-demo??

　　　　輸入命令后進入安裝階段，需要用戶輸入一些信息 這里省略了.....

　　-- 3，切換到我們的項目目錄下?

　　　　　　cd vue-demo

　　　　　　npm run dev

目錄結構：

　　-- build 里面是一些操作文件，使用npm run * 時其實執行的就是這里的文件

　　-- config 配置文件，執行文件需要的配置信息

　　-- src 資源文件 所有的組件以及所有的圖片 都在這個文件夾下

　　-- node_modules? 項目依賴包

　　-- static 靜態資源

　　-- 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'] }) ], // *******下面是如果手動下載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' }}, 修改配置文件

第三步 修改主程序的js文件 main.js

import $ from 'jquery' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' main.js?

?可以用啦~~~~~

vue-cli 3.0

第一步 下載vue-cli 3.0

　　-- npm install -g @vue/cli

　　-- 報錯 npm error? 可以運行下面命令

　　　　-- npm cache clean --force && npm cache verify

第二步 創建項目

　　-- vue create xxxx

　　之后會出現很多選項，我們可以根據自己的習慣去選擇~~

第三步 目錄結構以及配置文件

　　-- vue-cli3 目錄更加簡單

　　-- 我們手動在項目根目錄下創建? vue.config.js 里面寫vue的配置信息

vue-cli3 配置jQuery、bootstrap

　　-- 跟vue-cli2一樣的配置，手動創建一個webpack.base.conf.js?

轉載于:https://www.cnblogs.com/caodneg7/p/9954803.html

總結

以上是生活随笔為你收集整理的npm、webpack、vue-cli 快速上手版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。