简单搭建类库脚手架

gaojie0

2019-06-28

主目录

.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"