node js 常用知識點筆記

Node.js 安裝包及源碼下載地址爲：https://nodejs.org/en/download/。

Windows 上安裝 Node.js
下載Windows 安裝包(.msi)，雙擊下載後的安裝包安裝

Linux 上安裝 Node.js
CentOS 下源碼安裝 Node.js
1、下載源碼，你需要在https://nodejs.org/en/download/下載最新的Nodejs版本，本文以v0.10.24爲例:
cd /usr/local/src/
wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz

2、解壓源碼
tar zxvf node-v0.10.24.tar.gz

3、 編譯安裝
cd node-v0.10.24
./configure --prefix=/usr/local/node/0.10.24
make
make install

4、 配置NODE_HOME，進入profile編輯環境變量
vim /etc/profile

設置 nodejs 環境變量，在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 一行的上面添加如下內容:
#set for nodejs
export NODE_HOME=/usr/local/node/0.10.24
export PATH=$NODE_HOME/bin:$PATH

:wq保存並退出，編譯/etc/profile 使配置生效
source /etc/profile

驗證是否安裝配置成功
node -v
輸出 v0.10.24 表示配置成功

npm模塊安裝路徑
/usr/local/node/0.10.24/lib/node_modules/
---------------------------------------------------------------

環境配置1
  打開安裝的目錄
  在安裝目錄下新建兩個文件夾【node_global】和【node_cache】
  再次打開cmd命令窗口，輸入npm config set prefix  "你的路徑\node_global"
  npm config set cache  "你的路徑\node_cache"    可直接複製剛剛新建的空文件夾目錄
  
  npm config set prefix "C:\Program Files\nodejs\node_global"
  npm config set cache "C:\Program Files\nodejs\node_cache"

環境配置2
  打開-控制面板-系統和安全-系統高級設置-高級-環境變量
  在【系統變量】下新建【NODE_PATH】，輸入【C:\Program Files\nodejs\node_modules】，將【用戶變量】下的【Path】修改爲【C:\Program Files\nodejs\node_global】
  
配置完成後進行測試
　　 打開cmd命令行 最常用的express模塊  輸入  npm install  express -g   進行全局安裝
如果報錯，重新進行以上環境配置步驟

.npmrv
registry=https://xxx.com
strict-ssl=false
always-auth=true
_auth=NDUwODgyNjY654dfTG5oN35zc3Nzc3
prefix=C:\Users\.npm-global
cache=C:\Users\.npm-global\node_cache
http-proxy=http://xxx.com

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

創建項目：js-node-app
在項目文件目錄下生成package.json，進入項目目錄
$ npm init

安裝react的路由,不需要指定版本，默認最新
npm i react-router react-router-dom --save-dev

引入主要組件對象
import {BrowserRouter as Router,Route,Link,Redirect} from ‘react-router-dom’;

Router組件有且只有一個跟節點，除了路由組件，可以寫入其他標籤
默認 Route所在的位置爲路由組件顯示的容器（tips：Link寫在Router內部形成路由結構）
<Router>
    <div>
        <Link to="/home">首頁</Link>
        <Link to="/about">關於</Link>
        <Route path="/home" component={Home}></Route>
        <Route path="/about" component={About}></Route>
    </div>
</Router>

路由重定向 通過 Redirect組件對象，設置to屬性
<Redirect to="/about"/>
需要和Switch 配合使用

路由參數傳遞
/a/1 ---this.props.match.params.id               --------params 傳參
/a?id=1---this.props.location.query.id        ------query傳參
/a --  this.props.location.state             ---------state傳參

安裝antd
npm install antd --save

引入 react-app-rewired 並修改 package.json 裏的啓動配置
npm i react-app-rewired -D
修改package.json文件裏的scripts:
"scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test",
} 
然後在項目根目錄創建一個 config-overrides.js 文件，用於後面的修改默認配置。
使用babel-plugin-import， 一個用於按需加載組件代碼和樣式的babel插件
npm i babel-plugin-import -D

修改之前創建的 config-overrides.js 文件，把下面的代碼拷進去：
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
   config = injectBabelPlugin(
     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
     config,
   );
    return config;
};
import { Button } from ‘antd’; 無需另外引入antd.css了

引入 react-app-rewire 的 less 插件 react-app-rewire-less 來幫助加載 less 樣式
npm i --save react-app-rewire-less
修改 config-overrides.js：
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
   config = injectBabelPlugin(
     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
     config,
   );
   config = rewireLess.withLoaderOptions({
     modifyVars: { "@primary-color": "#1DA57A" },
     javascriptEnabled: true,
   })(config, env);
    return config;
};
修改後重新運行npm run start，就可以加載less文件了。

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

升級npm
npm -g install npm

用 npm 安裝 Webpack
$ npm install webpack -g
安裝 webpack 依賴:
$ npm install webpack --save-dev
安裝 webpack-dev-server 依賴:
$ npm install webpack-dev-server --save-dev
安裝 html-webpack-plugin 依賴:
$ npm install html-webpack-plugin --save-dev

npm install [email protected] [email protected]  -g

npm i copy-webpack-plugin  -g
npm install copy-webpack-plugin --save-dev

npm install webpack-cli -D
npm install webpack-cli -D提示在開發環境中局部安裝webpack-cli

用 npm 安裝 模塊加載器(loader)
$ npm install style-loader css-loader -g
安裝 style-loader css-loader 依賴:
$ npm install style-loader css-loader --save-dev

$ npm install mini-css-extract-plugin --save-dev

用 npm 安裝 babel-cli: babel轉碼器
$ npm install babel-cli -g
安裝 babel-cli 依賴:
$ npm install babel-cli --save-dev

用 npm 安裝 babel-preset-es2015
$ npm install babel-preset-es2015 -g
安裝 babel-preset-es2015 依賴:
$ npm install babel-preset-es2015 --save-dev
$ npm install babel-preset-es2016 --save-dev

安裝 babel-loader 依賴:
$ npm install babel-loader --save-dev

安裝 babel-plugin-add-module-exports 依賴:
npm install babel-plugin-add-module-exports --save-dev
在package.json中加入
"plugins": [
    "add-module-exports"
  ],

npm install make -g
npm i -g make-react-npm

npm install -g  core-js
npm install –save-dev  core-js

npm i -g readable-stream
npm i readable-stream –save-dev

npm i -g postcss-loade
npm install –save-dev postcss-loade

npm i -g postcss-modules-resolve-imports
npm i -g webpack-cli

用 npm 安裝 react
$ npm install react react-dom babel-preset-react -g
安裝 react 依賴:
$ npm install react react-dom babel-preset-react --save-dev

安裝 express 依賴:
npm install express -g
npm install express --save-dev

# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

安裝 react-hot-loader 依賴:
$ npm install react-hot-loader --save-dev

在項目文件目錄下創建.babelrc文件
{"preset":["es2015", "es2016", "react", "stage-1"]}
或在package.json中加入
"babel": {
    "presets": [
      "es2015",
      "stage-0"
    ],
    "plugins": ["react-hot-loader/babel"],
    "comments": false
},

在項目文件目錄下創建example文件夾,並在其下面創建如下文件
index.jsx：
var React = require("react");
var ReactDOM = require("react-dom");

import App from './app.jsx';

var Hello = React.createClass({
        render:function(){
                return <div>1234<App/></div>
        }
});

var div1 = document.createElement("div");
document.body.appendChild(div1);
ReactDOM.render(<Hello />,div1);

app.jsx:
var React = require("react");
var ReactDOM = require("react-dom");

export default class App extends React.Component{
        render(){
                return <h1>hello reactJs</h1>
        }
}

在項目文件目錄下建立webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin'); //使用自動生成html文件的一個插件
var path = require('path');

module.exports = {
 entry: './example/index.jsx',
 output:{
     path:'./example_build/',
     filename:'build.js'
 },
 module:{
     loaders:[
         {
             test:/\.css$/,
             loaders:['style','css'],
             exclude:'node_modules'
         },
         {
             test:/\.jsx?$/,
             loaders:['react-hot','babel?presets[]=es2015&presets[]=react'],
             exclude:"/node_modules/",
             include:path.resolve(__dirname,"example")
         }
     ]    },
 resolve:{
     extensions:['','.js','.css','.jsx']    },
 devServer: {
         hot:true,
         inline:true
 },
 
 plugins:[
     new htmlWebpackPlugin({
         title:"First react app"
     })
 ]
}

webpack打包
進入項目目錄
$ webpack

webpack-dev-server 熱加載
# 進入項目目錄
$ webpack-dev-server --hot --inline

此時在瀏覽器中打開http://localhost:8080/，將會看到example_build下index.html頁面內容。
這時，修改example下的index.jsx內容，頁面將會自動刷新；修改exampleg下的app.js內容，頁面將會局部刷新。

npm cache clean -f

npm run build

若出現Tapable.plugin is deprecated. Use new API on `.hooks` instead，執行下面命令
npm install -D extract-text-webpack-plugin@next -g
npm install extract-text-webpack-plugin@next --save-dev

在NPM 中安裝yarn
npm install -g yarn

npm install -g pm2

npm i -g util-deprecate