分支
koa-tools
为 koa2 + typescript 的开发环境,最初预想使用rollup
进行打包,无奈报错太多,转而使用tsc
进行 ts 源代码的编译工作。
"scripts": {
"compile": "npx tsc --project tsconfig.json -w",
"dev": "npx nodemon bin/www",
"build": "npx tsc --project tsconfig.json",
"prd": "npx pm2 start bin/www",
"eslint": "npx eslint src --ext .ts"
},
rollup 主要针对 JavaScript 库进行打包,对 css
、image
等其他资源支持不够友好
package.json 中可执行脚本
"scripts": {
"dev": "npx rollup -w -c ./config/rollup.config.dev.js",
"build": "npx rollup -c ./config/rollup.config.prod.js",
"lint": "tslint --project tsconfig.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
"test": "jest --passWithNoTests -u", // -u 允许写入或更新测试快照文件
"test:watch": "jest --coverage --watch",
"test:prod": "npm run lint && npm run test -- --no-cache"
}
rollup-plugin-commonjs
转化cmd模块,使用namedExports
导出找不到的 API 名字rollup-plugin-typescript2
typescript 编译rollup-plugin-babel
ES6编译@rollup/plugin-url
图片打包,可配置打包为base64或者copy图片的临界值,可配置 publicPath 根路径rollup-plugin-postcss
css打包rollup-plugin-serve
启动本地服务rollup-plugin-livereload
监听文件改变,并刷新浏览器rollup-plugin-terser
代码压缩rollup-plugin-external-globals
使用 CDN 加载 react 则需要使用该插件配置,如果是使用dll打包后的 react 则不用添加 externalGlobals 插件配置rollup-plugin-clear
清空指定目录rollup-plugin-progress
打包进度条
tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"baseUrl": ".",
"rootDirs": ["src"],
"moduleResolution": "node",
"target": "es5",
"module":"esnext",
"lib": ["es6", "dom"],
"strict": true,
"sourceMap": true,
// "allowJs": true,
"declaration": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declarationDir": "dist/types",
"outDir": "dist"
},
"include": [
"src/**/*",
"images.d.ts"
],
"exclude": ["node_modules", "dist", "config"]
}
babel.config.js
module.exports = {
presets: [[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": "3.3.3",
"targets": {
"ie": 10
}
}
], "@babel/preset-react"],
plugins: [
[
"@babel/plugin-transform-classes",
{
"loose": true
}
],
[
"@babel/plugin-proposal-class-properties",
{ "loose": true }
],
[
"@babel/plugin-proposal-object-rest-spread",
{ "useBuiltIns": true }
],
"@babel/plugin-transform-react-jsx",
"@babel/plugin-transform-runtime" // 解决多个地方使用相同代码导致打包重复的问题
]
}
eslint 配置,使用 eslint cli 自动生成,添加了推荐的 plugin:prettier/recommended
规则
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:prettier/recommended",
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {}
};
jest 测试框架配置 package.json 中配置(也可抽出一个单独的jest配置文件)
npm 包依赖
jest
jest-config
ts-jest
@types/jest
jest-environment-jsdom-fourteen
jest-watch-typeahead
@types/enzyme
@types/enzyme-adapter-react-16
enzyme
enzyme-adapter-react-16
enzyme-to-json
identity-obj-proxy
react-app-polyfill
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
],
"setupFiles": [
"react-app-polyfill/jsdom",
"<rootDir>/setup-react-adapter.ts"
],
"snapshotSerializers": [
"enzyme-to-json/serializer" // 快照生成
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
"\\.(css|scss)$": "identity-obj-proxy"
},
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"/test/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 95,
"lines": 95,
"statements": 95
}
},
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
]
}
cssTransform.js
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};
fileTransform.js
'use strict';
const path = require('path');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
},
};
setup-react-adapter.ts 测试启动执行文件,配置使用enzyme 测试 React 的环境,这样在每个测试文件中无需再进行配置了
import { configure } from "enzyme";
import * as ReactSixteenAdapter from "enzyme-adapter-react-16";
const Adapter = ReactSixteenAdapter as any;
configure({ adapter: new Adapter() });
polyfill 另一种解决方案 https://polyfill.alicdn.com/polyfill.min.js?features=default,es2017,es6,fetch,RegeneratorRuntime
根据浏览器兼容性自动引入 polyfills
<script src="https://polyfill.alicdn.com/polyfill.min.js?features=default,es2017,es6,fetch,RegeneratorRuntime"></script>