簡單搭建類庫腳手架

主目錄

• .npmrc文件
• .gitignore文件
• .travis.yml
• CHANGELOG.md
• jest
• LICENSE
• shell腳本
• README.md
• styleguide.config.js
• webpack.config.js
• package.json

---

.npmrc文件

這個文件能夠容許咱們在自動npm install的時候對當前npm環境設置參數
例如 registry = https://registry.npm.taobao.org 定義當前項目鏡像源地址
還有等等的能夠參考 npm參數設置
https://docs.npmjs.com/cli/co...

---

.gitignore

顧名思義是在裏面定義git 忽略的東西
它是符合globs模式的
寫起來與常見的匹配文件文件夾模式相似。
/xxxxxm ,!/dsdasd
過！

---

styleguide.config.js

因爲項目是react的，因此選擇react-styleguidist
因爲沒有中文文檔，因此只能瞭解英文文檔了
主要也是配一個config文件

• theme 自定義一些UI樣式，font樣式
• sections屬性 是主要定義內容的屬性(array)
• name 一個section title
• content 當前section的內容
• component 可定義匹配多個section
• description 一個對於section的簡單描述
• href 一個跳轉的url
• external 若是設置了 那個href跳轉的url會在新窗口打開
• webpackConfig 這個屬性容許咱們自定義webpack配置

至於配置方法，就是通常的webpack配置手段了。

• require
• style guide 所須要的第三方模塊或者polyfill
• getExampleFilename

在組件文件夾中，而後分發到指定的example.md

---

jest

jest是react如今最經常使用的測試庫之一。
通常常見有兩個地方進行config 設置。

package.json文件
jest.config.js文件

主要是看我的喜愛。
下面簡單介紹一下jest配置

• setupFiles 定義咱們初始化jest測試環境的文件
• rootDir 定義當前rootDir
• testMatch 測試匹配文件
• coverageDirectory 存放咱們coverage文件的地址
• collectCoverageFrom 指定收集coverage的源地址（符合globs原則）
• collectCoverage 是否手機coverage
• coverageReporters 一些report 模式。默認爲 ["json", "lcov", "text"] （text-summary能夠在控制檯看到一部分）
• moduleDirectories 定義搜索的模塊文件夾目錄
• coverageThreshold 設定成功的閾值
• verbose 是否在運行期間報告每一個單獨的錯誤
• transform 跟webpack配置相似
• moduleNameMapper 添加模塊映射規則
• testURL 設置location.href

module.exports = {
    setupFiles: ['./jest.setup.js'],
    rootDir: '',
    testMatch: ['<rootDir>/__test__/*.test.js','<rootDir>/__test__/**/*.test.js'],
    coverageDirectory: '<rootDir>/.coverage/',
    collectCoverageFrom: [
      '**/*.{js,jsx}',
      '!**/*.{config,setup}.js',
      '!**/node_modules/**',
      '!**/*.test.js',
      '!dist/*',
    ],
    collectCoverage: true,
    coverageReporters: ['lcov', 'text', 'text-summary'],
    moduleDirectories: [
      'node_modules',
      '<rootDir>',
    ],
    coverageThreshold: {
      global: {
        branches: 50,
        functions: 50,
        lines: 50,
        statements: 50,
      },
    },
    verbose: true,
    transform: {
        '^.+\\.js$': 'babel-jest'
    },
    moduleNameMapper: {
        "^.+\\.scss$": "<rootDir>/__test__/__mocks__/css-transform.js",
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__test__/__mocks__/fileMock.js",
        "^@app(.*)$": "<rootDir>/src/components$1",
    },
    testURL: "http://localhost/",
  };

// jest.setup.js
const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

enzyme.configure({ adapter: new Adapter() });

global.shallow = enzyme.shallow;
global.mount = enzyme.mount;
global.render = enzyme.render;

jest.setup.js主要對一些測試環境進行配置。

---

.travis.yml

主要是連接travis ci服務
build的主要生命週期
選擇可用的apt插件
可選安裝緩存組件

• before_install 鉤子
• install 鉤子
• before_script 鉤子
• script 鉤子
• 可選的before_cache（用於清理緩存）
• after_success 或者 after_failure 鉤子
• 可選的before_deploy
• 可選的deploy
• 可選的after_deploy
• after_script鉤子

sudo: false

language: node_js

node_js:
  - 6

install:
  - npm install -g codecov
  - npm install
  
script:
  - npm run test && codecov
cache:
  directories:
    - node_modules
  
before_install:
  - echo registry = https://registry.npmjs.org/ > .npmrc

附上自用的設置。

之因此 覆寫.npmrc文件 ，是travis ci服務機子應該在國外，使用npm的源應該會快一些，而咱們本地使用應該使用公司源或者taobao源

---

連接 coverage

首先須要在coverage得到一個項目的token值。
而後將token值定義在travis ci的環境變量中。
而後codecov 默認的是.coverage文件夾上傳~~。

---

LICENSE

咱們的開源協議啦~~

shell腳本

在咱們有了文檔，這裏能夠定義幾個簡單的shell腳本

例如自動將文檔push上gh-pages分支上

無非就是npx styleguidist build

拿出來的文件push 上分支就能夠啦~~

當咱們有了ci coverage等等的時候

咱們能夠給項目增長小徽章~~~！！！

---

package.json

相信你們都很熟悉。

對類庫模塊的版本控制，由於babel，webpack都更新了一個大版本。

若是盲目的npm install -S webpack babel的話。

容易形成配置不可用等問題。要注意版本

另外也要區別devDependencies 與dependencies等等的差異

script腳本

"test": "jest --env=jsdom --config ./jest.config.js",
    "test:watch": "jest --env=jsdom --config ./jest.config.js --watch",
    "start": "npm run dev",
    "dev": "npx styleguidist server",
    "lint": "eslint --ignore-path .gitignore ./src",
    "build": "webpack",
    "build:doc": "npx styleguidist build",
    "deploy:doc": "./publish-doc.sh"

總結

1. 應該後面還有有幾篇腳手架 webpack之類的文章
2. 源碼文章發不上來了，哭~~~
3. 後面還有一些文章準備發呀~~~
4. 前端衝呀衝鴨