此文介绍一些开源类库常见配置文件
希望阅读后可以配置出你自己需要的类库脚手架
- .npmrc文件
- .gitignore文件
- .travis.yml
- CHANGELOG.md
- jest
- LICENSE
- shell脚本
- README.md
- styleguide.config.js
- webpack.config.js
- package.json
.npmrc文件
这个文件可以允许我们在自动npm install的时候对当前npm环境设置参数 例如 registry = registry.npm.taobao.org 定义当前项目镜像源地址 还有等等的可以参考 npm参数设置 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"
总结
本文配置项结果 可以在 ZWkang/kangct 中查看。
配置不用照搬，再好的配置也需要按照场景，按照个人喜好，团队选择。
此文权当抛砖引玉之言。
你可以在这些地方找到我
欢迎交流探讨学习，共同进步，一起加油
