简单搭建类库脚手架

主目录

• .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. 前端冲呀冲鸭