Vue項目總結（1）-基本概念+Nodejs+VUE+VSCode

一個現代JS Web項目開發環境其實就是一個Nodejs應用，經過使用一系列工具完成開發過程當中的各類任務，因此，如今完成一個項目的開發不能只是敲代碼，還必須掌握一些現代的工程方法和工具。本文對於經常使用的一些工具和方法進行簡單整理。

基礎工具和概念

包管理

一般JS項目的開發都是從安裝依賴包開始的，就是執行npm i xxx命令。實際使用中，最好使用cnpm代替npm，速度快不少，出錯狀況也少。安裝時要區分3中狀況：dependencies（-S或--save），devDependencies（-D或--save-dev），peerDependencies。這3種方式都會把包安裝在node_modules目錄下，可是在package.json中在相應字段對象中。

dependencies是生產環境依賴的包，devDependencies是開發環境依賴的包。若是開發的項目是最終的應用，其實看不出這兩種方式有什麼區別，可是若是開發的是會被其餘項目依賴的庫，執行install時，只有dependencies被安裝，devDependencies不被安裝。

若是本身作的庫須要依賴某個包A，可是又不想在被其餘項目引用時在本身的目錄下安裝包A，而是使用項目中的包A，那麼就把這個包放在peerDependencies裏。這中方式主要是爲了解決版本一致性和靜態初始化的問題。這個和Nodejs查找node_modules的規則有關，在尋找NPM模塊包時，會從當前目錄出發，向上搜索各級當中的node_modules文件夾當中的文件，但如有兩個同名文件，則遵循就近原則。這樣就可能會致使整個應用使用某個包的版本不一致。若是包A裏有靜態初始化的代碼（例如：建立一個全局對象），這樣會致使屢次執行，產生衝突。

參考：docs.npmjs.com/files/packa…

參考：nodejs.org/dist/latest…

Babel

Babel是一個Javascript編譯器，經過插件（ plugin）對處理代碼。Babel的插件很是多，用preset表明插件的集合。

插件是npm裏的一個包，在Babel的配置文件中直接指定包名。

{
  "plugins": ["babel-plugin-myPlugin"]
}
複製代碼

插件的名稱若是以babel-plugin-開頭，能夠省略。

{
  "plugins": ["myPlugin"]
}
複製代碼

若是設置了多個插件或preset，執行的順序是：

1. 插件優先於預製；
2. 插件按從前到後執行；
3. 預製按從後到前執行。

插件和預製均可以指定參數。

{
  "plugins": [["pluginA", {}]]
}
複製代碼

參考：babeljs.io/docs/en/bab…

prettier

prettier是一個代碼格式化工具，能夠設置行寬度、縮進空格數、結尾分號等。

參考：prettier.io/docs/en/opt…

ESLint

ESLint是一個插件話的Javascript代碼檢查工具，能夠輔助發現代碼的語法和格式問題。

cnpm i eslint -D # 安裝 eslint --init # 初始化

ESLint 默認使用Espree做爲其解析器，你能夠在配置文件中指定一個不一樣的解析器，例如：Babel-ESLint。

{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}
複製代碼

一個環境定義了一組預約義的全局變量。

{
    "env": {
        "browser": true,
        "node": true
    }
}
複製代碼

ESLint 附帶有大量的規則。你可使用註釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置爲下列值之一：

• "off" 或 0 - 關閉規則
• "warn" 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會致使程序退出)
• "error" 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}
複製代碼

設置信息能夠放在.eslintrc.js文件或者package.json文件中的eslintConfig部分。

參考：eslint.bootcss.com/docs/user-g…

webpack

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

loader讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript），例如：style-loader，css-loader，file-loader等。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

插件目的在於解決 loader 沒法實現的其餘事，例如生成html文件（HtmlWebpackPlugin），限制chunk的大小，進行資源替換等。

從 webpack v4.0.0 開始，能夠不用引入一個配置文件。

參考：webpack.js.org

從頭設置新項目

從0開始

建立項目目錄。

mkdir try-vscode
複製代碼

初始化，建立默認的package.json文件。

npm init -y
複製代碼

在項目目錄下建立.vscode/settings.json文件，用於vscode的項目本地化設置。

{
  "editor.detectIndentation": false,
  "editor.tabSize": 2
}
複製代碼

設置代碼格式化

安裝插件Prettier - Code formatter

建立.prettierrc文件

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "printWidth": 120
}
複製代碼

也能夠將這些設置放在.vscode/settings.json中。

{
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 120,
  "prettier.tabWidth": 2
}
複製代碼

代碼檢查

安裝（若是已經進行了全局安裝能夠不進行本地安裝）

cnpm i eslint -S
複製代碼

初始化配置文件.eslintrc.js

npx eslint --init
複製代碼

按提示進行選擇

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser, Node
? What format do you want your config file to be in? JavaScript
複製代碼

設置完成後，在VSCode的代碼窗口和problem窗口中就會提示發現的錯誤。

發佈npm包

須要在npmjs.com註冊帳號，而後經過npm adduser命令添加帳號到本地。

在項目根目錄下執行命令。

npm publish
複製代碼

發佈包的內容在package.json文件中定義，主要的字段包括：name，version，files，main，module等。若是package.json中存在 module 字段，會優先使用，若是沒找到對應的文件，則會使用 main 字段，並按照 CommonJS 規範打包。每一次發佈包必須升級版本號，不能直接更新已有版本。

VUE項目

若是VUE的前端項目，最好直接用vue-cli建立項目，這樣就不用單獨安裝依賴包了。

vue-cli create try-vscode
複製代碼

項目建立成功後，會生成package.json和vue.config.js文件（建立項目過程當中能夠將其餘設置指定爲獨立的文件）。

若是項目的目錄結構比較複雜，引用代碼的層級較深，能夠考慮在vue.config.js文件中設置別名。

chainWebpack: config => {
    config.resolve.alias.set('@', resolve('./'))
  }
複製代碼

jest.config.js

{
  moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1'
    }
}
複製代碼