(一) Nodejs升級后遇到的問題

Nodejs升級后，npm 安裝 cnpm報錯，全局安裝其他模塊也報錯
解決以上報錯的方法：
把npm全局安裝路徑和緩存設置成默認路徑，刪掉C:\Users\xxx\AppData\Roaming\npm路徑中的node_modules，然后從新安裝cnpm和全局安裝其他模塊
( C:/Users/用戶名/AppData里面默認有三個文件夾，分別是Local，LocalLow，Roaming，簡單地來說，都是用來存放軟件的配置文件和臨時文件的 )
解決需要了解的知識點：

(1) 查看npm配置

npm config list  // 查看基本配置 (重要)

npm config list -l //查看所有配置

(2) 本地安裝 ( local )

npm install xxxx

(3) 全局安裝 ( global )

npm install -g xxxx
npm install --global xxxx
npm的默認全局安裝路徑為："C:\Users\xxx\AppData\Roaming\npm" 這里的xxx這里的xxx就要看你是什么電腦品牌了

設置全局安裝路徑

設置npm全局安裝路徑

npm config set prefix "目錄路徑"


// 例如
// npm config set prefix "C:\Users\MR X6TI\AppData\Roaming\npm"  -- 注意這里路徑一定要加引號

查看全局安裝路徑

查看npm全局安裝路徑

npm config get prefix

(4) 緩存路徑 ( cache )

npm的默認全局安裝路徑為："C:\Users\xxx\AppData\Roaming\npm-cache" 這里的xxx這里的xxx就要看你是什么電腦品牌了

設置緩存路徑 cache

設置緩存路徑

npm config set cache "目錄路徑"


// 例如
npm config set cache "C:\Users\MR X6TI\AppData\Roaming\npm-cache"  設置緩存文件夾

// -- 注意這里路徑一定要加引號

查看緩存路徑 cache

查看緩存路徑 cache

npm config get cache

(5) npm bin

npm bin 命令顯示相對于當前目錄的，Node 模塊的可執行腳本所在的目錄（即 .bin 目錄）。

npm bin


運行結果：
C:\Users\MR X6TI\node_modules\.bin

(官網api) https://www.npmjs.com.cn/cli/cache/
(詳細) https://www.cnblogs.com/djlxs/p/5731955.html
(專欄) https://segmentfault.com/p/1210000009653830/read
https://www.cnblogs.com/mei1234/p/7606780.html

(一) npm常用命令匯總

查看模塊的當前版本號

npm view 模塊名 version  ---------遠程倉庫中目前的版本號
 // 需要注意的是查看到的模塊版本是該模塊再遠程倉庫的版本號，并不是當前項目中所依賴的版本號。

 
npm list 模塊名 version  ---------當前項目中使用的版本號
 // 查看當前項目中應用的某個模塊的版本號的命令

查看模塊的歷史版本

 npm view 模塊名 versions

檢查包是否已經過時

 npm outdated

 // 此命令會列出所有已經過時的包，可以及時進行包的更新
 // outdated 是過時的意思

更新node模塊

 npm update 模塊名

 // 當然你也可以update 該模塊到指定版本
 npm update 模塊名 @版本號  -----------指定版本


 // 如果安裝到最新版本可以使用以下命令
 npm install 模塊名@latest  -----------最新版本 
 

 // 如果當前的版本號為2.5.1，是沒辦法進行npm update 模塊名 @2.3.1 將模塊版本號變為2.3.1的，

 // 當然，你可以先uninstall，然后進行install @2.3.1

 // 或者直接覆蓋安裝

卸載node模塊

 npm uninstall 模塊名


刪除本地模塊時你應該思考的問題：是否將在package.json上的相應依賴信息也消除？
npm uninstall 模塊：刪除模塊，但不刪除模塊留在package.json中的對應信息
npm uninstall 模塊 --save 刪除模塊，同時刪除模塊留在package.json中dependencies下的對應信息
npm uninstall 模塊 --save-dev 刪除模塊，同時刪除模塊留在package.json中devDependencies下的對應信息

創建package.json文件

 npm init

查看npm的版本

npm -v

(二) npm的版本控制

npm包的版本號的格式X.Y.Z
X為主版本號，只有更新了不向下兼容的API時進行修改主版本號 ( ^ )
Y為次版本號，當模塊增加了向下兼容的功能時進行修改 ( 波浪號 )
Z為修訂版本號，當模塊進行了向下兼容的bug修改后進行修改
1.修復bug,小改動，增加z
2.增加了新特性，但仍能向后兼容，增加y
3.有很大的改動，無法向后兼容,增加x

NPM依賴包版本號~和^和*的區別

版本號 X.Y.Z

脫字符(^)來限定所安裝模塊的主版本號
波浪號(~)是限定所安裝模塊的次要版本
星號  (*) 最新版本

------------------------------------

~ 會匹配最近的小版本依賴包，比如~1.2.3會匹配所有1.2.x版本，但是不包括1.3.0
^ 會匹配最新的大版本依賴包，比如^1.2.3會匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0
* 這意味著安裝最新版本的依賴包


推薦使用~，只會修復版本的bug，比較穩定

使用^ ，有的小版本更新后會引入新的問題導致項目不穩定，
比如：之前的weex老項目安裝依賴后頁面無法顯示，修改依賴版本后才正常

使用*， 同樣有上述問題

npm安裝指定版本

npm install 模塊名@版本號 

例如：cnpm install webpack@4.0.0 -D

https://www.cnblogs.com/penghuwan/p/6973702.html
https://www.cnblogs.com/blackgan/p/7828047.html

(三) match對象

(1) match 對象包含了 <Route path> 如何與 URL 匹配的信息，match對象中包含了以下參數：

path

這里的path，是 <Route path="/chat/:user" component={xxx} /> 中的path

即  path = '/chat/:user

在需要嵌套<Route/>的時候用到------ <Route path="path"  />

url是當前的url地址

比如：url:"/chat/5a885a36867c9c4570d8de66"

在需要使用<Link/>的時候會用到------<Link  to="url"/>

params

通過解析URL中動態的部分獲得的鍵值對都被包含在這個對象中

比如：params:{user: "5a885a36867c9c4570d8de66"}

isExact

path 是否等于 pathname，當為true時，整個URL都需要匹配

比如：isExact:true

當一個 Route 沒有 path 時，它會匹配一切路徑。一般404頁面就用該方法。( 在有<Switch>標簽，并且有Router沒有path時，只要Switch中其他路由都沒有命中，其他的地址都會帶有沒有path的Route


ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <AuthRoute></AuthRoute>
                <Switch>
                    <Route path="/bossinfo" component={BossInfo}></Route> 
                    <Route path="/geniusinfo" component={GeniusInfo}></Route>
                    <Route path='/register' component={Register}></Route> 
                    <Route path='/login' component={Login}></Route>
                    <Route path='/chat/:user' component={Chat}></Route>
                    <Route component={Dashboard}></Route> 
                    // 只要其他路由未命中，都會加載Dashboard路由組件
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>
, document.getElementById('root'));
registerServiceWorker();

(2) this.props.match

只要是路由組件，就可以在組件內部通過 this.props.match獲得以上數據
非路由組件，需要使用withRouter (match, history, location非路由組件都需要使用withRouter,通過this.props獲得相關數據)
對于history,除了用withRouter外，還可以用這幾種方式去跳轉路由-------如何使用history跳轉路由(全)：https://segmentfault.com/a/1190000011137828

withRouter


import {withRouter} from 'react-router-dom';

class authRoute extends React.Component {
 ...
}

export default withRouter(authRoute)

(四) location對象

(1) location對象中包含了以下參數：

hash：設置或返回從井號 (#) 開始的 URL（錨）。
search：設置或返回從問號 (?) 開始的 URL（查詢部分）。
pathname：設置或返回當前 URL 的路徑部分(路徑部分)。
state：一個捆綁在這個地址上的object對象
key：唯一ID
- href：設置或返回完整的 URL。
- host：設置或返回主機名和當前 URL 的端口號。
- hostname：設置或返回當前 URL 的主機名。
- port：設置或返回當前 URL 的端口號。
- protocol：設置或返回當前 URL 的協議

location對象

(2) location 對象不會發生改變，因此可以在生命周期的回調函數中使用 location 對象來查看當前頁面的訪問地址是否發生改變。這種技巧在獲取遠程數據以及使用動畫時非常有用


componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // navigated!
  }
}

(五) history對象

(1) history對象中包含了以下參數：

location對象----history對象中有location對象，可變
go
goBack 返回-1
goForward 向前+1
push(location) 跳轉到需要的路由，將新條目推入歷史堆棧
replace(location) 替換歷史堆棧上的當前條目
length 歷史堆棧中的條目數量
action 當前動作（PUSH，REPLACE，或POP）

(2) history是可變的，因此請使用location對象獲取地址，而不是history.location中獲取地址

https://zhuanlan.zhihu.com/p/20799258?refer=jscss

(六) webpack-bundle-analyzer 包分析工具

安裝

cnpm install webpack-bundle-analyzer --save-dev

使用：

在webpack.config.dev.js中


const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}


使用 Webpack 編譯之后，可視化的結果會被展示在http://localhost:8888/

webpack打包優化：https://segmentfault.com/a/1190000011138081
基于 Webpack 的應用包體尺寸優化：https://segmentfault.com/a/1190000008151173

(七) babel-preset-env

替換之前所有babel-presets-es20xx插件
當安裝babel-preset-ws2015的時候，會提示安裝babel-preset-env
使用：


1.在babel配置文件中
{
"presets": ["env", "react", ...]
}
上面這個配置的作用和babel-prset-latest的作用一致也就是下面這個配置
{
"presets": ["latest"]
}



2.babel-preset-env可以設置一些選項，比如：
targets 指定運行環境
targets.node 指定node版本
targets.browsers 指定瀏覽器版本
modules 指定何種形式的模塊，設置為false表示不轉碼模塊



具體配置書寫方式如下
{
"presets": [
    ["env",{
        "targets": {
            "chrome": 52,
            "browsers": ["last 2 versions","safari 7"]
        }
    }]
]
}

https://segmentfault.com/a/1190000010468759

https://segmentfault.com/a/1190000010657339#articleHeader7
https://segmentfault.com/a/1190000010174260

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

React.js學習筆記(20) ( ! Nodejs升級后npm全局安裝模塊出錯相關總結 ) + match,location,history + ( webpack-bundle-analyzer包分析插件 ) + ( npm常用命令匯總 ) + ( babel-preset-env )

React.js學習筆記(20) ( ! Nodejs升級后npm全局安裝模塊出錯相關總結 ) + match,location,history + ( webpack-bundle-analyzer包分析插件 ) + ( npm常用命令匯總 ) + ( babel-preset-env )

(一) Nodejs升級后遇到的問題

(1) 查看npm配置

(2) 本地安裝 ( local )

(3) 全局安裝 ( global )

(4) 緩存路徑 ( cache )

(5) npm bin

(一) npm常用命令匯總

(二) npm的版本控制

(三) match對象

(1) match 對象包含了 <Route path> 如何與 URL 匹配的信息，match對象中包含了以下參數：

(2) this.props.match

(四) location對象

(1) location對象中包含了以下參數：

(2) location 對象不會發生改變，因此可以在生命周期的回調函數中使用 location 對象來查看當前頁面的訪問地址是否發生改變。這種技巧在獲取遠程數據以及使用動畫時非常有用

(五) history對象

(1) history對象中包含了以下參數：

(2) history是可變的，因此請使用location對象獲取地址，而不是history.location中獲取地址

(六) webpack-bundle-analyzer 包分析工具

(七) babel-preset-env

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

React.js學習筆記(20) ( ! Nodejs升級后npm全局安裝模塊出錯相關總結 ) + match,location,history + ( webpack-bundle-analyzer包分析插件 ) + ( npm常用命令匯總 ) + ( babel-preset-env )

(一) Nodejs升級后遇到的問題

(1) 查看npm配置

(2) 本地安裝 ( local )

(3) 全局安裝 ( global )

(4) 緩存路徑 ( cache )

(5) npm bin

(一) npm常用命令匯總

(二) npm的版本控制

(三) match對象

(1) match 對象包含了 <Route path> 如何與 URL 匹配的信息，match對象中包含了以下參數：

(2) this.props.match

(四) location對象

(1) location對象中包含了以下參數：

(2) location 對象不會發生改變，因此可以在生命周期的回調函數中使用 location 對象來查看當前頁面的訪問地址是否發生改變。這種技巧在獲取遠程數據以及使用動畫時非常有用

(五) history對象

(1) history對象中包含了以下參數：

(2) history是可變的，因此請使用location對象獲取地址，而不是history.location中獲取地址

(六) webpack-bundle-analyzer 包分析工具

(七) babel-preset-env

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

(1) match 對象包含了 <Route path> 如何與 URL 匹配的信息，match對象中包含了以下參數：

(2) location 對象不會發生改變，因此可以在生命周期的回調函數中使用 location 對象來查看當前頁面的訪問地址是否發生改變。這種技巧在獲取遠程數據以及使用動畫時非常有用

(2) history是可變的，因此請使用location對象獲取地址，而不是history.location中獲取地址