类库脚手架

  • .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/config


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

发表评论

电子邮件地址不会被公开。 必填项已用*标注