通過 nvm 管理Node

Node 安裝可以用官網(wǎng)的 Installer 安裝，也可以通過 Node version manager 來安裝。本文重點是介紹后者，這也是官方強烈推薦的方式。因為，在項目開發(fā)的過程中，對于不同的項目需求，往往需要不同的 Node 版本。而 Node 又是如火如荼的更新著，變化太快，我們往往希望體驗新版本的特性，但又想在某些項目企圖通過老版本保證穩(wěn)定性，所以有一個 Node version manager 顯得尤為重要。

具體安裝指導比較簡單，可以參考官方文檔：https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

nvm 支持 linux，macos，windows。作者本人安裝的是windows。

windows 安裝路徑：https://github.com/coreybutler/nvm-windows/releases

本來在 windows 企圖通過 Cygwin 來安裝，可惜不支持。

nvm 基本命令

查看nvm版本：nvm -v

查看安裝的 node：nvm list

安裝某個版本 node: nvm install <版本號>, 例如：nvm install v10.15.1

卸載某個版本 node: nvm uninstall <版本號>

應用某個版本 node: nvm use <版本號>

建議設置nvm settings.txt文件，修改軟件包鏡像沒國內(nèi)源，增加如下內(nèi)容：

node_mirror: https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

安裝好 nvm 后，可以安裝 Node 版本，

nvm install v6.17.1
nvm use v6.17.1
nvm list

一個 js 前端工程需要哪些工作

經(jīng)過多年的發(fā)展，js也不再是被人詬病為隨意、裸奔的那樣種種了。。。。

尤其是隨著es6的出現(xiàn)，Node.js的出現(xiàn)，程序員的工程理念也發(fā)生了很大的變化。工程構(gòu)建需要流程化，自動化，模塊化，軟件倉庫。代碼要lint，一套代碼希望在Client、Server同時工作等等。

構(gòu)建一個前端工程，最基本需要幾部分工作：

• 選擇一個工程構(gòu)建工具，webpack, grunt, gulp。

• 編譯，為了兼容不同瀏覽器 ES6 到 ES5 轉(zhuǎn)碼。比如 babel。

• Lint，靜態(tài)檢查語法錯誤。

• browserify, 允許用 Node.js 的方式編寫瀏覽器執(zhí)行的代碼。

• uglify, 代碼壓縮。

工程目錄結(jié)構(gòu)

我們創(chuàng)建一個目錄，helloworld-js

windows 命令提示符進入，執(zhí)行 npm init, 生成一個package.json文件，這樣工程設置建好了。

然后，規(guī)劃目錄結(jié)構(gòu)。大概如下：

+-hellworld-js
    +--+ build
    +--+ lib
    +--+ test
    +--- package.json
    +--- gulpfile.js
    +--- .jshintrc
    +--- .babelrc

    build, lib, test 都是目錄，其他都是普通文件。build 是生成編譯后生成文件的。

gulp

gulp 是一個流式構(gòu)建工具，充分利用了 pipe 的威力(相對于 grunt，是通過生成中間文件的方式)。

官方鏈接：https://gulpjs.com/docs/en/getting-started/quick-start

支持的幾個函數(shù)：

src() 讀取源文件

dest() 生成目標文件

series() 串行執(zhí)行任務

paralles() 并行執(zhí)行任務

安裝

npm install gulp --save-dev

npm install gulp-cli --save-dev

gulp3 和 gulp4 在 task 依賴上的差異

使用 gulp 自動構(gòu)建 JavaScript 項目，需要在工程目錄下創(chuàng)建一個 gulpfile.js 文件，編寫task執(zhí)行函數(shù)。

語法都是 JavaScript 語法，非常方便。

gulp3:

gulp.task('lint', (done)=>{
   done();
});

gulp.task('default', ['lint']);// 數(shù)組的方式

gulp4:

gulp.task('lint', ()=>{

});

gulp.task('default', gulp.series('lint'));//改成內(nèi)部函數(shù)調(diào)用

jshint

jshint 靜態(tài) JavaScript 代碼檢查工具，從 jslint 演化而來。

從事過程 C/C++ 工作的人都知道，有一個 pc-lint 的工具，彼此類似。

主要就是對代碼靜態(tài)檢查，包括語法合法性，編程風格(比如，變量命名)，往往能發(fā)現(xiàn)很多低級錯誤，極大提高了工作效率。

• 配合 gulp，需要安裝 gulp-jshint 插件。 npm install gulp-jshint --save-dev

• 創(chuàng)建一個 .jshintrc 文件，編寫檢查規(guī)則。

對于瀏覽器內(nèi)置對象，比如 XMLHttpRequest 會報類似下面的錯誤，

“l(fā)ine 15, col 19, 'XMLHttpRequest' is not defined.”

解決這個錯誤，只需要在腳本開頭增加“/* jshint browser: true */”，即可。

一些配置使用，可以參考：https://jshint.com/docs/

babel

babel 主要是將符合 ECMAScript 2015+ 標準的代碼轉(zhuǎn)換成兼容低版本瀏覽器的代碼。

安裝：

npm install gulp-babel @babel/core @babel/preset-env --save-dev

babel 配置，需要創(chuàng)建 .babelrc 文件，內(nèi)容如下：

{
    "presets":["@babel/env"],
    "plugins": ["@babel/plugin-transform-classes"]
}

babel 可以支持很多插件，做很多事情，可以參考官方文檔：

https://babeljs.io/docs/en/index.html

browserify

Node.js 通過 require('/xxx') 的方式來引入其他模塊，但是瀏覽器不支持。然而，Node.js 目前這么火，有那么多模塊可以使用，方便客戶端代碼的編寫。我們?nèi)绾尾拍苁芤嬗?Node.js 社區(qū)呢？需要通過 browserify。

只要我們給 browserify 指定一個入口文件，它就會把所有引入的模塊都打包在一起，變成一個 bundle。

安裝：npm install browserify --save-dev

配合 gulp 使用的話，需要在 task 中做如下調(diào)用:

gulp.task('bundle', (done) =>{
    console.log('browserify...');
    
    browserfiy({
        entries      : './build/lib-es5/index.js',
        extensions   : [ '.js' ],
        standalone: 'helloworld',
        debug        : false,
        // Required for watchify (not used here).
        cache        : null,
        // Required for watchify (not used here).
        packageCache : null,
        // Required to be true only for watchify (not used here).
        fullPaths    : false
    })
    .bundle()
    .pipe(source('helloworld-min.js'))
    .pipe(buffer())
    .pipe(rename('helloworld-min.js'))    
    .pipe(gulp.dest('build'));

    done();
});

注意！??！

在瀏覽器使用的過程中，必須要指定 standalone: 'helloworld', 否則導出的模塊不會添加到全局對象中，瀏覽器訪問不到。

參考文檔：https://github.com/browserify/browserify-handbook

uglify

uglify 是對 JavaScript 代碼進行壓縮瘦身，這樣能加快瀏覽器的加載速度，可以節(jié)省客戶端流量。

安裝：npm install gulp-uglify --save-dev

Demo 編寫

本文demo的地址：https://github.com/avdance/AVDemo.git

git clone https://github.com/avdance/AVDemo.git
cd AVDemo/code/helloworld-js
gulp

然后將 build 目錄下面的 hellowrld-min.js 拷貝在 test 目錄下面，

進入 test 目錄，雙擊 index.html ，在瀏覽器調(diào)試模式下會輸出：
I am from index
index.html:15 hello = 1

demo調(diào)試過程中遇到的問題

getter 方法使用

getter方法是在es5中就支持的。

class TestGetter{
    constructer(info){
        this.info = info;
    }

    get info(){
        return this.info;
    }
}
var tg = new TestGetter('test');
cosole.log(tg.info);//就像訪問普通屬性一樣

參考：https://stackoverflow.com/questions/31999259/what-is-the-get-keyword-before-a-function-in-a-class

browserify

導出的接口，瀏覽器中是Undefined，需要設置 standalone 選項。

參考：https://stackoverflow.com/questions/23296094/browserify-how-to-call-function-bundled-in-a-file-generated-through-browserify

import 接口

// test1.js
export default class Test1{
    constructor(info){
        this.info = info;
    }
    get info(){
        return this.info;
    }
}

// test2.js
export default class Test2{
    constructor(info){
        this.info = info;
    }

    get info(){
        return this.info;
    }
}

// index.js
import * as test1 from './test1';
import * as test2 from './test2';

export {test1, test2};

如上例子，index.js 中導出的 test1 ，test2，在訪問 info 屬性的時候，需要，

var t1 = new test1.Test1();

t1.info;

為什么不是如下形式？

var t1 = new test1();

t1.info;

參考文獻

gulp 工程構(gòu)建：https://www.engineyard.com/blog/client-side-javascript-project-gulp-and-browserify