Javascript 項目常用的一些配置文件

zxhaaa 發布于2019-08-21 18:40 / 3370人閱讀

摘要：引子基本上上優秀的項目上面有很多零零碎碎的文件。其他平臺除了，市面上還有其他很多平臺，如項目中使用的和等等。利用提供的若干規則，造出一份適合于自己或團隊的代碼規范配置，同時用規則去忽略文件只是用來純粹美化代碼。

引子

基本上 GitHub 上優秀的javascript項目上面有很多零零碎碎的文件。如圖，以koa為例

下文將一一說明這些個“奇怪”的文件是干什么的...

持續集成篇

持續集成（CI, Continuous integration），是將我們的代碼規范化流程化。
相比于系統集成，CI希望每一次微小的代碼修改，都會進行一次集成（可能包括構建，測試，發布等階段），這樣極大地加強了項目工程的可控性。

從 GitLab 8.0 開始，GitLab CI 就已經集成在 GitLab 中^[1]。那么 GitHub 中對于CI的支持如何呢？GitHub 可以采用任意第三方的 CI 服務，下面主要介紹其中的一種：travis-ci

travis-ci (.travis.yml)

官網：https://travis-ci.org/
該平臺也是本人經常使用的 CI 平臺，需要在項目跟目錄下添加文件 .travis.yml，如：

language: node_js
node_js: stable

install:
  - npm install
script:
  - npm test

便是一個簡單的配置文件參考，travis-ci 有下面幾個生命周期，順序如下：^[2]

before_install

install

before_script

script

after_success 或者 after_failure

before_deploy

deploy

after_deploy

after_script

同時 travis-ci 還提供了一大批的 Provider，以方便我們來書寫一些常用的部署動作^[3]

配置好了之后，同時在travis-ci認證提供之后，并且給對應的repo賦予權限，那么我們的每次commit都會觸發按照上面的執行過程，在travis-ci提供的集群上執行。

其他 CI 平臺

除了 travis-ci，市面上還有其他很多 CI 平臺，如：react 項目中使用的 appveyor 和 CircleCi 等等。至于這些平臺的對比則不是該文章的討論范疇了。

代碼規范篇

代碼規范又是另一個話題了，但是目的都是為了提高代碼的可控性，減少 bug 率。

ESLint (.eslintrc.*, .eslintignore)

利用 ESLint 提供的若干規則，造出一份適合于自己或團隊的代碼規范配置，同時 .eslintignore 用 glob file 規則去忽略文件

Prettier (.prettierrc, .prettierignore)

Prettier 只是用來純粹美化代碼。

工具篇 CodeCov (.codecov.yml)

一個好的工程，離不開一系列的測試，CodeCov 則是用來報告測試中代碼覆蓋率的工具

Babel (.babelrc, .babelignore) NPM (.npmrc)

這倆兄弟不多做解釋了，前端都知道~

其他 .editorconfig

http://editorconfig.org/
我們在不同編輯器，不同系統平臺編寫同一項目代碼時，常常會遇到代碼格式不統一的問題，該文件則是用來抹去這種差異！

結

以上便是比較常用的一些javascript項目的配置文件說明，后續還會不斷添加，歡迎大家伙指正添加。

參考

[1] 用 GitLab CI 進行持續集成

[2] travis-ci: Customizing the Build

[3] travis-ci: Deployment

云服務器 GPU云服務器 linux的一些常用命令配置阿里云window服務器的一些坑云服務器可以清除哪一些文件文件服務器的項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90703.html

TCM的webpack配置與常用插件

摘要：中的配置熱加載插件安裝中的配置優化插件為組件分配，通過這個插件可以分析和優先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言本文是針對TCM項目所做的WebPack配置文件總結，主要概述了一些常用配置選項和插件使用，對以后的項目有指導意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

羅志環 2019-08-20 14:36 評論0 收藏0
TCM的webpack配置與常用插件

摘要：中的配置熱加載插件安裝中的配置優化插件為組件分配，通過這個插件可以分析和優先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言本文是針對TCM項目所做的WebPack配置文件總結，主要概述了一些常用配置選項和插件使用，對以后的項目有指導意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

張憲坤 2019-08-01 16:23 評論0 收藏0
NPM — JavaScript 的包管理器

摘要：是的默認模塊管理器，一個命令行下的軟件，用來安裝和管理模塊，同時也可以管理其他開放式的模塊代碼。的包管理器可以查看所有可使用的命令。發布記得在推之前先登錄要不然會報錯。最后需要把文件里面的刪除掉要不然上傳時會忽略掉打包的文件。本文主要介紹npm的常用命令，以及如何發布一些常用的js模塊化代碼到npm上面方便日后的使用，和舉例如何把一個vue組件打包發布到npm到最后下載到本地使用的過...

ZweiZhao 2019-08-21 17:49 評論0 收藏0
前端常用技術概述--Less、typescript與webpack

摘要：前言講起前端，我們就不能不講與，在這兩種技術廣泛應用的今天，他們的擴展也是層出不窮，的擴展有等，的超集有等。如下注意你的樣式文件一定要在引入前先引入。截止目前，已經發布了最新的版本。前言：講起前端，我們就不能不講CSS與Javascript，在這兩種技術廣泛應用的今天，他們的擴展也是層出不窮，css的擴展有Less、Sass、Stylus等，js的超集有Typescript等。今天我們就簡...

番茄西紅柿 2019-04-23 11:55 評論0 收藏0