简单搭建类库脚手架

主目录

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

所有的flag都完不成的。

594 声望
18 粉丝
0 条评论
推荐阅读
ctressa和linecitats
轮子造了就写文章以免遗忘咯。 ctressa ctressa是前一段时间对测试较为入迷。 所以阅读了一些断言库,断言框架的代码。 本质上断言框架例如 mocha,ava 这些,最初的实现大抵都是一个任务执行器。 每一个断言都是...

ZWkang阅读 1.1k

浅析 SplitChunksPlugin 及代码分割的意义
A: 最初,chunks(以及内部导入的模块)是通过内部webpack 图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化。从webpack v4 开始,移除了CommonsChunkPlu...

heweixiao2阅读 528

【关于webpack的打包原理】webpackJsonpCallback的学习笔记
代码中的webpackJsonpCallback是什么意思?webpackJsonpCallback是webpack在浏览器端异步加载模块的时候定义的全局函数。当webpack加载一个异步模块时,会生成一个script标签,指向异步模块的url,此时浏览器会异...

梨花1阅读 775

「Webpack5源码」enhanced-resolve路径解析库源码分析
本文内容基于webpack 5.74.0和enhanced-resolve 5.12.0版本进行分析webpack5核心流程专栏共有5篇,使用流程图的形式分析了webpack5的构建原理:「Webpack5源码」make阶段(流程图)分析「Webpack5源码」enhanced-...

白边2阅读 519

js写脚本循环点击网页按钮
一份积年累月的登记台账,需要予以确认,但是不能多选操作,只能一条条的点,近千条记录,操作一条需要点击4次。幸亏学过点js,边抄编写,代码如下网页有jQuery,方便得多,没有的话得自己引入jQuery选择器参考:...

二毛erma01阅读 2.6k评论 4

前端微服务跨域配置解决办法,devServer为例
前言Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。Webpack: 而我们更多的时候是在开发阶段就需要通过跨域进行联合开发各个子应用部分功能DevServer配置解决跨域子应用静态资源跨域...

smallStone2阅读 2.3k评论 12

回顾webpack在vue.config.js中写loader和plugin
我们知道,无论是Vue的vue-cli还是React的create-react-app这样的脚手架,实际上都是给webpack做了一层封装,包了一层壳子,并预设了一些默认常用的配置项(当然还有别的东西),以便提升开发效率。

水冗水孚1阅读 784

所有的flag都完不成的。

594 声望
18 粉丝
宣传栏