@wang1212/create-web-app
Advanced tools
Comparing version 0.2.9 to 0.3.0
{ | ||
"name": "@wang1212/create-web-app", | ||
"version": "0.2.9", | ||
"keywords": [ | ||
"web-app", | ||
"SPA", | ||
"PWA", | ||
"webpack4", | ||
"babel7", | ||
"flow.js", | ||
"jest", | ||
"typescript", | ||
"eslint", | ||
"react.js", | ||
"redux.js" | ||
], | ||
"description": "Create PWA(Progressive Web App) project development environment startup configuration.", | ||
"homepage": "https://github.com/wang1212/create-web-app#readme", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/wang1212/create-web-app.git" | ||
}, | ||
"license": "ISC", | ||
"engines": { | ||
"node": ">=10" | ||
}, | ||
"author": "wang1212", | ||
"bin": { | ||
"create-web-app": "index.js", | ||
"create-pwa": "index.js", | ||
"create-react-app": "index-react.js", | ||
"create-rpwa": "index-react.js" | ||
}, | ||
"dependencies": { | ||
"chalk": "^3.0.0", | ||
"fs-extra": "^8.1.0" | ||
} | ||
"name": "@wang1212/create-web-app", | ||
"version": "0.3.0", | ||
"keywords": [ | ||
"web-app", | ||
"SPA", | ||
"PWA", | ||
"webpack4", | ||
"babel7", | ||
"flow.js", | ||
"jest", | ||
"typescript", | ||
"eslint", | ||
"react.js", | ||
"redux.js" | ||
], | ||
"description": "Create PWA(Progressive Web App) project development environment startup configuration.", | ||
"homepage": "https://github.com/wang1212/create-web-app#readme", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/wang1212/create-web-app.git" | ||
}, | ||
"license": "ISC", | ||
"engines": { | ||
"node": ">=10" | ||
}, | ||
"author": "wang1212", | ||
"bin": { | ||
"create-web-app": "index.js", | ||
"create-pwa": "index.js", | ||
"create-react-app": "index-react.js", | ||
"create-rpwa": "index-react.js" | ||
}, | ||
"dependencies": { | ||
"chalk": "^3.0.0", | ||
"fs-extra": "^8.1.0" | ||
} | ||
} |
module.exports = { | ||
"presets": [ | ||
"@babel/preset-env", | ||
presets: [ | ||
'@babel/preset-env', | ||
[ | ||
"@babel/preset-flow", | ||
'@babel/preset-typescript', | ||
{ | ||
"all": true | ||
} | ||
], | ||
[ | ||
"@babel/preset-typescript", | ||
{ | ||
isTSX: true, | ||
@@ -18,6 +12,3 @@ allExtensions: true | ||
], | ||
"plugins": [ | ||
"@babel/plugin-syntax-dynamic-import", | ||
"@babel/plugin-proposal-object-rest-spread", | ||
] | ||
} | ||
plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-object-rest-spread'] | ||
} |
{ | ||
"env": { | ||
"node" : true, | ||
"browser": true, | ||
"es6" : true, | ||
"jest" : true | ||
}, | ||
"extends" : [ | ||
"eslint:recommended", | ||
"plugin:prettier/recommended", | ||
"prettier/flowtype" | ||
], | ||
"parser" : "babel-eslint", | ||
"parserOptions": { | ||
"ecmaFeatures": { | ||
"experimentalObjectRestSpread": true | ||
}, | ||
"sourceType": "module" | ||
}, | ||
"plugins": [], | ||
"rules" : { | ||
"no-console": [ | ||
"error", | ||
{ | ||
"allow": [ | ||
"warn", | ||
"error" | ||
] | ||
} | ||
], | ||
"indent": [ | ||
"error", | ||
"tab" | ||
], | ||
"linebreak-style": [ | ||
"error", | ||
"windows" | ||
], | ||
"quotes": [ | ||
"error", | ||
"single" | ||
], | ||
"semi": [ | ||
"error", | ||
"never" | ||
] | ||
}, | ||
"globals": {} | ||
} | ||
"parser": "@typescript-eslint/parser", | ||
"parserOptions": { | ||
"project": "./tsconfig.json", | ||
"sourceType": "module" | ||
}, | ||
"env": { | ||
"node": true, | ||
"browser": true, | ||
"es6": true, | ||
"jest": true | ||
}, | ||
"plugins": ["@typescript-eslint", "prettier"], | ||
"extends": [ | ||
"eslint:recommended", | ||
"plugin:@typescript-eslint/eslint-recommended", | ||
"plugin:@typescript-eslint/recommended", | ||
"plugin:@typescript-eslint/recommended-requiring-type-checking", | ||
"plugin:prettier/recommended", | ||
"prettier/@typescript-eslint" | ||
], | ||
"settings": {}, | ||
"rules": { | ||
"no-console": [ | ||
"error", | ||
{ | ||
"allow": ["warn", "error"] | ||
} | ||
], | ||
"indent": ["error", "tab"], | ||
"linebreak-style": ["error", "windows"], | ||
"quotes": ["error", "single"], | ||
"semi": ["error", "never"] | ||
}, | ||
"globals": {} | ||
} |
@@ -1,2 +0,1 @@ | ||
# Changelog | ||
# Changelog |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
// For a detailed explanation regarding each configuration property, visit: | ||
@@ -161,3 +163,3 @@ // https://jestjs.io/docs/en/configuration.html | ||
transform: { | ||
'^.+\\.jsx?$': 'babel-jest' | ||
'^.+\\.[jt]sx?$': 'babel-jest' | ||
} | ||
@@ -164,0 +166,0 @@ |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! jsdoc config */ | ||
@@ -2,0 +4,0 @@ |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! path config */ | ||
@@ -2,0 +4,0 @@ |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! webpack config */ | ||
@@ -17,4 +19,2 @@ | ||
OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'), | ||
ImageminPlugin = require('imagemin-webpack-plugin').default, | ||
ImageminJpeg = require('imagemin-jpeg-recompress'), | ||
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin, | ||
@@ -43,3 +43,3 @@ WorkboxPlugin = require('workbox-webpack-plugin') | ||
{ | ||
test: /\.worker\.js$/, | ||
test: /\.worker\.js$/i, | ||
exclude: /node_modules/, | ||
@@ -53,3 +53,3 @@ use: [ | ||
{ | ||
test: /\.[tj]sx?$/, | ||
test: /\.[tj]sx?$/i, | ||
exclude: /node_modules/, | ||
@@ -66,3 +66,3 @@ use: [ | ||
{ | ||
test: /\.(sa|sc|c)ss$/, | ||
test: /\.(sa|sc|c)ss$/i, | ||
exclude: /node_modules/, | ||
@@ -90,3 +90,3 @@ use: [ | ||
{ | ||
test: /\.html$/, | ||
test: /\.html$/i, | ||
exclude: /node_modules/, | ||
@@ -103,3 +103,3 @@ use: [ | ||
{ | ||
test: /\.(png|jpg|gif)$/, | ||
test: /\.(gif|png|jpe?g|svg)$/i, | ||
exclude: /node_modules/, | ||
@@ -112,2 +112,25 @@ use: [ | ||
} | ||
}, | ||
{ | ||
loader: 'image-webpack-loader', | ||
options: { | ||
disable: is_dev, | ||
mozjpeg: { | ||
progressive: true, | ||
quality: 65 | ||
}, | ||
optipng: { | ||
enabled: false | ||
}, | ||
pngquant: { | ||
quality: [0.65, 0.9], | ||
speed: 4 | ||
}, | ||
gifsicle: { | ||
interlaced: false | ||
}, | ||
webp: { | ||
quality: 75 | ||
} | ||
} | ||
} | ||
@@ -152,21 +175,5 @@ ] | ||
}), | ||
new ImageminPlugin({ | ||
disable: is_dev, | ||
optipng: { | ||
optimizationLevel: 7 | ||
}, | ||
gifsicle: { | ||
optimizationLevel: 3, | ||
interlaced: true | ||
}, | ||
jpegtran: null, | ||
svgo: { | ||
plugins: [{ removeViewBox: true }, { cleanupIDs: false }] | ||
}, | ||
pngquant: {}, | ||
plugins: [ImageminJpeg()] | ||
}), | ||
new BundleAnalyzerPlugin(), | ||
new WorkboxPlugin.GenerateSW({ | ||
maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, | ||
maximumFileSizeToCacheInBytes: 8 * 1024 * 1024, | ||
additionalManifestEntries: [ | ||
@@ -173,0 +180,0 @@ { url: 'vendor-manifest.json', revision: app_info._version }, |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! External dependencies packaged individually */ | ||
@@ -2,0 +4,0 @@ |
{ | ||
"name": "web-app", | ||
"version": "1.0.0", | ||
"description": "PWA(Progressive Web App).", | ||
"author": "", | ||
"license": "ISC", | ||
"browserslist": [ | ||
"defaults" | ||
], | ||
"scripts": { | ||
"start": "set NODE_ENV=development && node scripts/index.js", | ||
"build": "node scripts/index.js", | ||
"test": "jest --config=./config/jest.config.js", | ||
"webpack": "npx webpack --config ./config/webpack.config.js", | ||
"flow": "flow", | ||
"flow-typed": "flow-typed install", | ||
"tsc": "tsc --noEmit", | ||
"jsdoc": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js" | ||
}, | ||
"dependencies": { | ||
"regenerator-runtime": "^0.13.3" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.8.4", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.8.3", | ||
"@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
"@babel/preset-env": "^7.8.4", | ||
"@babel/preset-flow": "^7.8.3", | ||
"@babel/preset-typescript": "^7.8.3", | ||
"babel-eslint": "^10.1.0", | ||
"babel-jest": "^25.1.0", | ||
"babel-loader": "^8.0.6", | ||
"browser-sync": "^2.26.7", | ||
"copy-webpack-plugin": "^5.1.1", | ||
"css-loader": "^3.4.2", | ||
"del": "^5.1.0", | ||
"docdash": "^1.2.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.10.0", | ||
"eslint-plugin-prettier": "^3.1.2", | ||
"file-loader": "^5.1.0", | ||
"flow-bin": "^0.119.1", | ||
"flow-typed": "^3.0.0", | ||
"html-loader": "^0.5.5", | ||
"html-webpack-plugin": "^3.2.0", | ||
"imagemin-jpeg-recompress": "^6.0.0", | ||
"imagemin-webpack-plugin": "^2.4.2", | ||
"jest": "^25.1.0", | ||
"jsdoc": "^3.6.3", | ||
"jsdoc-babel": "^0.5.0", | ||
"mini-css-extract-plugin": "^0.9.0", | ||
"node-sass": "^4.13.1", | ||
"optimize-css-assets-webpack-plugin": "^5.0.3", | ||
"postcss-loader": "^3.0.0", | ||
"postcss-preset-env": "^6.7.0", | ||
"prettier": "1.19.1", | ||
"sass-loader": "^8.0.2", | ||
"style-loader": "^1.1.3", | ||
"typescript": "^3.8.2", | ||
"uglifyjs-webpack-plugin": "^2.2.0", | ||
"url-loader": "^3.0.0", | ||
"webpack": "^4.41.6", | ||
"webpack-bundle-analyzer": "^3.6.0", | ||
"workbox-webpack-plugin": "^5.0.0", | ||
"worker-loader": "^2.0.0" | ||
} | ||
"name": "web-app", | ||
"version": "1.0.0", | ||
"description": "PWA(Progressive Web App).", | ||
"author": "", | ||
"license": "ISC", | ||
"browserslist": [ | ||
"defaults" | ||
], | ||
"scripts": { | ||
"start": "set NODE_ENV=development && node scripts/index.js", | ||
"build": "node scripts/index.js", | ||
"test": "jest --config=config/jest.config.js", | ||
"type-check": "tsc --project tsconfig.json --noEmit", | ||
"lint": "eslint --config .eslintrc.json --ext js,jsx,.ts,.tsx --ignore-pattern src/vendors/**/* src/", | ||
"webpack": "npx webpack --config ./config/webpack.config.js", | ||
"doc": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js" | ||
}, | ||
"dependencies": { | ||
"regenerator-runtime": "^0.13.5" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.8.7", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.8.3", | ||
"@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
"@babel/preset-env": "^7.8.7", | ||
"@babel/preset-typescript": "^7.8.3", | ||
"@typescript-eslint/eslint-plugin": "^2.23.0", | ||
"@typescript-eslint/parser": "^2.23.0", | ||
"babel-jest": "^25.1.0", | ||
"babel-loader": "^8.0.6", | ||
"browser-sync": "^2.26.7", | ||
"copy-webpack-plugin": "^5.1.1", | ||
"css-loader": "^3.4.2", | ||
"del": "^5.1.0", | ||
"docdash": "^1.2.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.10.0", | ||
"eslint-plugin-prettier": "^3.1.2", | ||
"file-loader": "^5.1.0", | ||
"html-loader": "^0.5.5", | ||
"html-webpack-plugin": "^3.2.0", | ||
"image-webpack-loader": "^6.0.0", | ||
"jest": "^25.1.0", | ||
"jsdoc": "^3.6.3", | ||
"jsdoc-babel": "^0.5.0", | ||
"mini-css-extract-plugin": "^0.9.0", | ||
"node-sass": "^4.13.1", | ||
"optimize-css-assets-webpack-plugin": "^5.0.3", | ||
"postcss-loader": "^3.0.0", | ||
"postcss-preset-env": "^6.7.0", | ||
"prettier": "1.19.1", | ||
"sass-loader": "^8.0.2", | ||
"style-loader": "^1.1.3", | ||
"typescript": "^3.8.3", | ||
"uglifyjs-webpack-plugin": "^2.2.0", | ||
"url-loader": "^3.0.0", | ||
"webpack": "^4.42.0", | ||
"webpack-bundle-analyzer": "^3.6.1", | ||
"workbox-webpack-plugin": "^5.0.0", | ||
"worker-loader": "^2.0.0" | ||
} | ||
} |
@@ -26,2 +26,3 @@ # Web App | ||
| | └── shared/ # 公共组件 | ||
| ├── reduxs/ # redux 配置文件 | ||
| ├── utils/ # 工具组件、常量 | ||
@@ -33,4 +34,3 @@ | ├── vendors/ # 外部依赖 | ||
|── .eslintrc.json # eslint 代码规则检查配置 | ||
|── .prettierrc.yaml # prettier 代码格式化配置 | ||
|── .flowconfig # flow 语法检查配置 | ||
|── .prettierrc.yml # prettier 代码格式化配置 | ||
|── tsconfig.json # typescript 配置文件 | ||
@@ -41,59 +41,57 @@ └── CHANGELOG.md # 项目迭代更新记录 | ||
- [SPA](https://en.wikipedia.org/wiki/Single-page_application) - 应用以 SPA 单页面方式进行构建。 | ||
- [PWA](https://en.wikipedia.org/wiki/Progressive_web_applications) - 使用谷歌的 [WorkBox](https://developers.google.com/web/tools/workbox/) 工具提供的 [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) 插件来生成 `service-work.js` 文件,对应用数据进行离线缓存。 | ||
- [Webpack](https://webpack.js.org/) - 自动化项目构建,模块化管理、打包、压缩、优化。 | ||
- [Browser-Sync](https://www.browsersync.io/) - 该插件配合 Webpack 实现热重载(hot reload)。 | ||
- [Babel](https://babeljs.io/) - 支持使用 E6/7/8/9 进行编码。 | ||
- [Flow.js](https://flow.org/) - 静态语法校验。 | ||
- [TypeScript](http://www.typescriptlang.org/) - 支持使用 TypeScript 进行编码。 | ||
- [ESLint](https://eslint.org/) - 语法规则检查。 | ||
- [Prettier](https://prettier.io/) - 代码格式化。 | ||
- [Jest](https://jestjs.io/) - 单元测试。 | ||
- [JSDoc 3](http://usejsdoc.org/) - 生成 API 文档,因此在开发时注释风格应符合 jsdoc 规则。 | ||
- [Nginx](http://nginx.org/) - 反向代理实现前后端的完全分离开发/部署解决方案。 | ||
- [SPA](https://en.wikipedia.org/wiki/Single-page_application) - 应用以 SPA 单页面方式进行构建。 | ||
- [PWA](https://en.wikipedia.org/wiki/Progressive_web_applications) - 使用谷歌的 [WorkBox](https://developers.google.com/web/tools/workbox/) 工具提供的 [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) 插件来生成 `service-work.js` 文件,对应用数据进行离线缓存。 | ||
- [Webpack](https://webpack.js.org/) - 自动化项目构建,模块化管理、打包、压缩、优化。 | ||
- [Browser-Sync](https://www.browsersync.io/) - 该插件配合 Webpack 实现热重载(hot reload)。 | ||
- [Babel](https://babeljs.io/) - 支持使用 E6/7/8/9 进行编码。 | ||
- [React.js](https://reactjs.org/) - 基于 React 开发。 | ||
- [Redux.js](https://redux.js.org/) - 应用状态管理。 | ||
- [React Router](https://reacttraining.com/react-router/) - 页面路由管理。 | ||
- [TypeScript](http://www.typescriptlang.org/) - 支持使用 TypeScript 进行编码。 | ||
- [ESLint](https://eslint.org/) - 语法规则检查。 | ||
- [Prettier](https://prettier.io/) - 代码格式化。 | ||
- [Jest](https://jestjs.io/) - 单元测试。 | ||
- [JSDoc 3](http://usejsdoc.org/) - 生成 API 文档,因此在开发时注释风格应符合 jsdoc 规则。 | ||
- [Nginx](http://nginx.org/) - 反向代理实现前后端的完全分离开发/部署解决方案。 | ||
## Usage | ||
1. 安装依赖 | ||
下载该项目的所有代码到本地。 | ||
首先,安装开发环境所有的依赖 | ||
1. 首先,安装开发环境所有的依赖 | ||
npm install | ||
npm install | ||
若使用 [Flow.js](https://flow.org/),还需运行以下命令安装类型定义库: | ||
2. 服务器 | ||
npm run flow-typed | ||
若使用反向代理,需在本地安装好 nginx,配置文件在 **config/nginx.conf** 中,启动 nginx : | ||
2. 服务器 | ||
start nginx | ||
若使用反向代理,需安装好 nginx,配置文件在 **config/nginx.conf** 中,启动 nginx : | ||
若不使用反向代理,更改 **scripts/index.js** 中 [BrowserSync](https://www.browsersync.io/) 插件的配置即可。 | ||
start nginx | ||
3. 启动项目(开发环境) | ||
若不使用反向代理,更改 **scripts/index.js** 中 [BrowserSync](https://www.browsersync.io/) 插件的配置即可。 | ||
npm run start | ||
3. 启动项目(开发环境) | ||
4. 执行代码类型检查 | ||
npm run start | ||
针对 `.ts, .tsx` 文件,运行: | ||
4. 执行代码类型检查 | ||
npm run type-check | ||
如果是写的 `.js, .jsx`,那么运行: | ||
针对所有文件,运行: | ||
npm run flow | ||
npm run lint | ||
如果是写的 `.ts, .tsx`,那么运行: | ||
5. 执行代码测试 | ||
npm run tsc | ||
npm run test | ||
5. 执行代码测试 | ||
6. 生成 jsdoc 文档 | ||
npm run test | ||
npm run doc | ||
6. 生成 jsdoc 文档 | ||
7. 构建生产环境代码,将会在 **build/** 目录中生成部署代码 | ||
npm run jsdoc | ||
7. 构建生产环境代码,将会在 **build/** 目录中生成部署代码 | ||
npm run build | ||
npm run build |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! starter && build */ | ||
@@ -26,3 +28,3 @@ | ||
// eslint-disable-next-line | ||
console.log('--------- Clean up the build directory is complete ! -----------\n'); | ||
console.log('--------- Clean up the build directory is complete ! -----------\n') | ||
@@ -41,3 +43,3 @@ // webpack | ||
// eslint-disable-next-line | ||
console.log( | ||
console.log( | ||
stats.toString({ | ||
@@ -89,3 +91,3 @@ colors: true, | ||
// eslint-disable-next-line | ||
console.log(err.message); | ||
console.log(err.message) | ||
}) |
@@ -9,8 +9,7 @@ /* App entry file */ | ||
import './app.scss' | ||
import view from './components/test-ts/index.tsx' | ||
import view from './components/test-ts/index' | ||
window['App'].innerHTML = ` | ||
<h1>App running !</h1> | ||
<p>${view}</p> | ||
` | ||
` |
{ | ||
"compilerOptions": { | ||
"sourceMap": true | ||
"sourceMap": true, | ||
"rootDir": ".", | ||
"resolveJsonModule": true, | ||
"esModuleInterop": true, | ||
"strictNullChecks": true, | ||
"noImplicitThis": true | ||
// "noImplicitAny": true | ||
}, | ||
"include": [ | ||
"src/**/*" | ||
], | ||
"exclude": [ | ||
"node_modules", | ||
"**/*.spec.ts" | ||
] | ||
} | ||
"include": ["src", "scripts", "config"], | ||
"exclude": ["node_modules", "docs", "public", "src/vendors/**/*", "**/*.spec.ts"] | ||
} |
module.exports = { | ||
"presets": [ | ||
"@babel/preset-env", | ||
presets: [ | ||
'@babel/preset-env', | ||
'@babel/preset-react', | ||
[ | ||
"@babel/preset-flow", | ||
'@babel/preset-typescript', | ||
{ | ||
"all": true | ||
} | ||
], | ||
"@babel/preset-react", | ||
[ | ||
"@babel/preset-typescript", | ||
{ | ||
isTSX: true, | ||
@@ -19,7 +13,3 @@ allExtensions: true | ||
], | ||
"plugins": [ | ||
"@babel/plugin-syntax-dynamic-import", | ||
"@babel/plugin-proposal-class-properties", | ||
"@babel/plugin-proposal-object-rest-spread" | ||
] | ||
} | ||
plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-object-rest-spread'] | ||
} |
{ | ||
"settings": { | ||
"react": { | ||
"createClass": "createReactClass", | ||
"pragma": "React", | ||
"version": "detect", | ||
"flowVersion": "0.119.1" | ||
} | ||
}, | ||
"env": { | ||
"node" : true, | ||
"browser": true, | ||
"es6" : true, | ||
"jest": true | ||
}, | ||
"extends" : [ | ||
"eslint:recommended", | ||
"plugin:react/recommended", | ||
"plugin:prettier/recommended", | ||
"prettier/flowtype", | ||
"prettier/react" | ||
], | ||
"parser" : "babel-eslint", | ||
"parserOptions": { | ||
"ecmaFeatures": { | ||
"experimentalObjectRestSpread": true, | ||
"jsx" : true | ||
}, | ||
"sourceType": "module" | ||
}, | ||
"plugins": [ | ||
"react", | ||
"react-hooks" | ||
], | ||
"rules" : { | ||
"no-console": [ | ||
"error", | ||
{ | ||
"allow": [ | ||
"warn", | ||
"error" | ||
] | ||
} | ||
], | ||
"indent": [ | ||
"error", | ||
"tab" | ||
], | ||
"linebreak-style": [ | ||
"error", | ||
"windows" | ||
], | ||
"quotes": [ | ||
"error", | ||
"single" | ||
], | ||
"semi": [ | ||
"error", | ||
"never" | ||
], | ||
"react-hooks/rules-of-hooks": "error", | ||
"react-hooks/exhaustive-deps": "warn" | ||
}, | ||
"globals": {} | ||
"parser": "@typescript-eslint/parser", | ||
"parserOptions": { | ||
"project": "./tsconfig.json", | ||
"sourceType": "module", | ||
"ecmaFeatures": { | ||
"jsx": true | ||
} | ||
}, | ||
"env": { | ||
"node": true, | ||
"browser": true, | ||
"es6": true, | ||
"jest": true | ||
}, | ||
"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"], | ||
"extends": [ | ||
"eslint:recommended", | ||
"plugin:react/recommended", | ||
"plugin:@typescript-eslint/eslint-recommended", | ||
"plugin:@typescript-eslint/recommended", | ||
"plugin:@typescript-eslint/recommended-requiring-type-checking", | ||
"plugin:prettier/recommended", | ||
"prettier/@typescript-eslint", | ||
"prettier/react" | ||
], | ||
"settings": { | ||
"react": { | ||
"createClass": "createReactClass", | ||
"pragma": "React", | ||
"version": "detect" | ||
} | ||
}, | ||
"rules": { | ||
"no-console": [ | ||
"error", | ||
{ | ||
"allow": ["warn", "error"] | ||
} | ||
], | ||
"indent": ["error", "tab"], | ||
"linebreak-style": ["error", "windows"], | ||
"quotes": ["error", "single"], | ||
"semi": ["error", "never"], | ||
"react-hooks/rules-of-hooks": "error", | ||
"react-hooks/exhaustive-deps": "warn" | ||
}, | ||
"globals": {} | ||
} |
@@ -1,2 +0,1 @@ | ||
# Changelog | ||
# Changelog |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
// For a detailed explanation regarding each configuration property, visit: | ||
@@ -161,3 +163,3 @@ // https://jestjs.io/docs/en/configuration.html | ||
transform: { | ||
'^.+\\.jsx?$': 'babel-jest' | ||
'^.+\\.[jt]sx?$': 'babel-jest' | ||
} | ||
@@ -164,0 +166,0 @@ |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! jsdoc config */ | ||
@@ -28,2 +30,2 @@ | ||
} | ||
} | ||
} |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! path config */ | ||
@@ -2,0 +4,0 @@ |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! webpack config */ | ||
@@ -17,4 +19,2 @@ | ||
OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'), | ||
ImageminPlugin = require('imagemin-webpack-plugin').default, | ||
ImageminJpeg = require('imagemin-jpeg-recompress'), | ||
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin, | ||
@@ -43,3 +43,3 @@ WorkboxPlugin = require('workbox-webpack-plugin') | ||
{ | ||
test: /\.worker\.js$/, | ||
test: /\.worker\.js$/i, | ||
exclude: /node_modules/, | ||
@@ -53,3 +53,3 @@ use: [ | ||
{ | ||
test: /\.[tj]sx?$/, | ||
test: /\.[tj]sx?$/i, | ||
exclude: /node_modules/, | ||
@@ -66,3 +66,3 @@ use: [ | ||
{ | ||
test: /\.(sa|sc|c)ss$/, | ||
test: /\.(sa|sc|c)ss$/i, | ||
exclude: /node_modules/, | ||
@@ -90,3 +90,3 @@ use: [ | ||
{ | ||
test: /\.html$/, | ||
test: /\.html$/i, | ||
exclude: /node_modules/, | ||
@@ -103,3 +103,3 @@ use: [ | ||
{ | ||
test: /\.(png|jpg|gif)$/, | ||
test: /\.(gif|png|jpe?g|svg)$/i, | ||
exclude: /node_modules/, | ||
@@ -112,2 +112,25 @@ use: [ | ||
} | ||
}, | ||
{ | ||
loader: 'image-webpack-loader', | ||
options: { | ||
disable: is_dev, | ||
mozjpeg: { | ||
progressive: true, | ||
quality: 65 | ||
}, | ||
optipng: { | ||
enabled: false | ||
}, | ||
pngquant: { | ||
quality: [0.65, 0.9], | ||
speed: 4 | ||
}, | ||
gifsicle: { | ||
interlaced: false | ||
}, | ||
webp: { | ||
quality: 75 | ||
} | ||
} | ||
} | ||
@@ -152,18 +175,2 @@ ] | ||
}), | ||
new ImageminPlugin({ | ||
disable: is_dev, | ||
optipng: { | ||
optimizationLevel: 7 | ||
}, | ||
gifsicle: { | ||
optimizationLevel: 3, | ||
interlaced: true | ||
}, | ||
jpegtran: null, | ||
svgo: { | ||
plugins: [{ removeViewBox: true }, { cleanupIDs: false }] | ||
}, | ||
pngquant: {}, | ||
plugins: [ImageminJpeg()] | ||
}), | ||
new BundleAnalyzerPlugin(), | ||
@@ -170,0 +177,0 @@ new WorkboxPlugin.GenerateSW({ |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! External dependencies packaged individually */ | ||
@@ -2,0 +4,0 @@ |
{ | ||
"name": "web-app-with-react", | ||
"version": "1.0.0", | ||
"description": "Based on React.js, Redux, React-Router, PWA (Progressive Web App), progressive web application.", | ||
"author": "", | ||
"license": "ISC", | ||
"browserslist": [ | ||
"defaults" | ||
], | ||
"scripts": { | ||
"start": "set NODE_ENV=development && node scripts/index.js", | ||
"build": "node scripts/index.js", | ||
"test": "jest --config=./config/jest.config.js", | ||
"webpack": "npx webpack --config ./config/webpack.config.js", | ||
"flow": "flow", | ||
"flow-typed": "flow-typed install", | ||
"tsc": "tsc --noEmit", | ||
"jsdoc": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js" | ||
}, | ||
"dependencies": { | ||
"@loadable/component": "^5.12.0", | ||
"axios": "^0.19.2", | ||
"react": "^16.12.0", | ||
"react-dom": "^16.12.0", | ||
"react-jss": "^10.0.4", | ||
"react-redux": "^7.2.0", | ||
"react-router-dom": "^5.1.2", | ||
"redux": "^4.0.5", | ||
"redux-thunk": "^2.3.0", | ||
"regenerator-runtime": "^0.13.3" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.8.4", | ||
"@babel/plugin-proposal-class-properties": "^7.8.3", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.8.3", | ||
"@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
"@babel/preset-env": "^7.8.4", | ||
"@babel/preset-flow": "^7.8.3", | ||
"@babel/preset-react": "^7.8.3", | ||
"@babel/preset-typescript": "^7.8.3", | ||
"babel-eslint": "^10.1.0", | ||
"babel-jest": "^25.1.0", | ||
"babel-loader": "^8.0.6", | ||
"browser-sync": "^2.26.7", | ||
"copy-webpack-plugin": "^5.1.1", | ||
"css-loader": "^3.4.2", | ||
"del": "^5.1.0", | ||
"docdash": "^1.2.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.10.0", | ||
"eslint-plugin-prettier": "^3.1.2", | ||
"eslint-plugin-react": "^7.18.3", | ||
"eslint-plugin-react-hooks": "^2.4.0", | ||
"file-loader": "^5.1.0", | ||
"flow-bin": "^0.119.1", | ||
"flow-typed": "^3.0.0", | ||
"html-loader": "^0.5.5", | ||
"html-webpack-plugin": "^3.2.0", | ||
"imagemin-jpeg-recompress": "^6.0.0", | ||
"imagemin-webpack-plugin": "^2.4.2", | ||
"jest": "^25.1.0", | ||
"jsdoc": "^3.6.3", | ||
"jsdoc-babel": "^0.5.0", | ||
"mini-css-extract-plugin": "^0.9.0", | ||
"node-sass": "^4.13.1", | ||
"optimize-css-assets-webpack-plugin": "^5.0.3", | ||
"postcss-loader": "^3.0.0", | ||
"postcss-preset-env": "^6.7.0", | ||
"prettier": "1.19.1", | ||
"redux-logger": "^3.0.6", | ||
"sass-loader": "^8.0.2", | ||
"style-loader": "^1.1.3", | ||
"typescript": "^3.8.2", | ||
"uglifyjs-webpack-plugin": "^2.2.0", | ||
"url-loader": "^3.0.0", | ||
"webpack": "^4.41.6", | ||
"webpack-bundle-analyzer": "^3.6.0", | ||
"workbox-webpack-plugin": "^5.0.0", | ||
"worker-loader": "^2.0.0" | ||
} | ||
"name": "web-app-with-react", | ||
"version": "1.0.0", | ||
"description": "Based on React.js, Redux, React-Router, PWA (Progressive Web App), progressive web application.", | ||
"author": "", | ||
"license": "ISC", | ||
"browserslist": [ | ||
"defaults" | ||
], | ||
"scripts": { | ||
"start": "set NODE_ENV=development && node scripts/index.js", | ||
"build": "node scripts/index.js", | ||
"test": "jest --config=config/jest.config.js", | ||
"type-check": "tsc --project tsconfig.json --noEmit", | ||
"lint": "eslint --config .eslintrc.json --ext js,jsx,.ts,.tsx --ignore-pattern src/vendors/**/* src/", | ||
"webpack": "npx webpack --config ./config/webpack.config.js", | ||
"doc": "jsdoc -P ./package.json -R ./README.md -c ./config/jsdoc.config.js" | ||
}, | ||
"dependencies": { | ||
"@loadable/component": "^5.12.0", | ||
"axios": "^0.19.2", | ||
"react": "^16.13.0", | ||
"react-dom": "^16.13.0", | ||
"react-jss": "^10.0.4", | ||
"react-redux": "^7.2.0", | ||
"react-router-dom": "^5.1.2", | ||
"redux": "^4.0.5", | ||
"redux-thunk": "^2.3.0", | ||
"regenerator-runtime": "^0.13.5" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.8.7", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.8.3", | ||
"@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
"@babel/preset-env": "^7.8.7", | ||
"@babel/preset-react": "^7.8.3", | ||
"@babel/preset-typescript": "^7.8.3", | ||
"@types/loadable__component": "^5.10.0", | ||
"@types/react": "^16.9.23", | ||
"@types/react-redux": "^7.1.7", | ||
"@types/react-router-dom": "^5.1.3", | ||
"@typescript-eslint/eslint-plugin": "^2.23.0", | ||
"@typescript-eslint/parser": "^2.23.0", | ||
"babel-jest": "^25.1.0", | ||
"babel-loader": "^8.0.6", | ||
"browser-sync": "^2.26.7", | ||
"copy-webpack-plugin": "^5.1.1", | ||
"css-loader": "^3.4.2", | ||
"del": "^5.1.0", | ||
"docdash": "^1.2.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.10.0", | ||
"eslint-plugin-prettier": "^3.1.2", | ||
"eslint-plugin-react": "^7.19.0", | ||
"eslint-plugin-react-hooks": "^2.5.0", | ||
"file-loader": "^5.1.0", | ||
"html-loader": "^0.5.5", | ||
"html-webpack-plugin": "^3.2.0", | ||
"image-webpack-loader": "^6.0.0", | ||
"jest": "^25.1.0", | ||
"jsdoc": "^3.6.3", | ||
"jsdoc-babel": "^0.5.0", | ||
"mini-css-extract-plugin": "^0.9.0", | ||
"node-sass": "^4.13.1", | ||
"optimize-css-assets-webpack-plugin": "^5.0.3", | ||
"postcss-loader": "^3.0.0", | ||
"postcss-preset-env": "^6.7.0", | ||
"prettier": "1.19.1", | ||
"redux-logger": "^3.0.6", | ||
"sass-loader": "^8.0.2", | ||
"style-loader": "^1.1.3", | ||
"typescript": "^3.8.3", | ||
"uglifyjs-webpack-plugin": "^2.2.0", | ||
"url-loader": "^3.0.0", | ||
"webpack": "^4.42.0", | ||
"webpack-bundle-analyzer": "^3.6.1", | ||
"workbox-webpack-plugin": "^5.0.0", | ||
"worker-loader": "^2.0.0" | ||
} | ||
} |
@@ -33,4 +33,3 @@ # Web App with React.js | ||
|── .eslintrc.json # eslint 代码规则检查配置 | ||
|── .prettierrc.yaml # prettier 代码格式化配置 | ||
|── .flowconfig # flow 语法检查配置 | ||
|── .prettierrc.yml # prettier 代码格式化配置 | ||
|── tsconfig.json # typescript 配置文件 | ||
@@ -41,17 +40,16 @@ └── CHANGELOG.md # 项目迭代更新记录 | ||
- [SPA](https://en.wikipedia.org/wiki/Single-page_application) - 应用以 SPA 单页面方式进行构建。 | ||
- [PWA](https://en.wikipedia.org/wiki/Progressive_web_applications) - 使用谷歌的 [WorkBox](https://developers.google.com/web/tools/workbox/) 工具提供的 [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) 插件来生成 `service-work.js` 文件,对应用数据进行离线缓存。 | ||
- [Webpack](https://webpack.js.org/) - 自动化项目构建,模块化管理、打包、压缩、优化。 | ||
- [Browser-Sync](https://www.browsersync.io/) - 该插件配合 Webpack 实现热重载(hot reload)。 | ||
- [Babel](https://babeljs.io/) - 支持使用 E6/7/8/9 进行编码。 | ||
- [React.js](https://reactjs.org/) - 基于 React 开发。 | ||
- [Redux.js](https://redux.js.org/) - 应用状态管理。 | ||
- [React Router](https://reacttraining.com/react-router/) - 页面路由管理。 | ||
- [Flow.js](https://flow.org/) - 静态语法校验。 | ||
- [TypeScript](http://www.typescriptlang.org/) - 支持使用 TypeScript 进行编码。 | ||
- [ESLint](https://eslint.org/) - 语法规则检查。 | ||
- [Prettier](https://prettier.io/) - 代码格式化。 | ||
- [Jest](https://jestjs.io/) - 单元测试。 | ||
- [JSDoc 3](http://usejsdoc.org/) - 生成 API 文档,因此在开发时注释风格应符合 jsdoc 规则。 | ||
- [Nginx](http://nginx.org/) - 反向代理实现前后端的完全分离开发/部署解决方案。 | ||
- [SPA](https://en.wikipedia.org/wiki/Single-page_application) - 应用以 SPA 单页面方式进行构建。 | ||
- [PWA](https://en.wikipedia.org/wiki/Progressive_web_applications) - 使用谷歌的 [WorkBox](https://developers.google.com/web/tools/workbox/) 工具提供的 [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) 插件来生成 `service-work.js` 文件,对应用数据进行离线缓存。 | ||
- [Webpack](https://webpack.js.org/) - 自动化项目构建,模块化管理、打包、压缩、优化。 | ||
- [Browser-Sync](https://www.browsersync.io/) - 该插件配合 Webpack 实现热重载(hot reload)。 | ||
- [Babel](https://babeljs.io/) - 支持使用 E6/7/8/9 进行编码。 | ||
- [React.js](https://reactjs.org/) - 基于 React 开发。 | ||
- [Redux.js](https://redux.js.org/) - 应用状态管理。 | ||
- [React Router](https://reacttraining.com/react-router/) - 页面路由管理。 | ||
- [TypeScript](http://www.typescriptlang.org/) - 支持使用 TypeScript 进行编码。 | ||
- [ESLint](https://eslint.org/) - 语法规则检查。 | ||
- [Prettier](https://prettier.io/) - 代码格式化。 | ||
- [Jest](https://jestjs.io/) - 单元测试。 | ||
- [JSDoc 3](http://usejsdoc.org/) - 生成 API 文档,因此在开发时注释风格应符合 jsdoc 规则。 | ||
- [Nginx](http://nginx.org/) - 反向代理实现前后端的完全分离开发/部署解决方案。 | ||
@@ -62,39 +60,38 @@ ## Usage | ||
1. 首先,安装开发环境所有的依赖 | ||
1. 首先,安装开发环境所有的依赖 | ||
npm install | ||
npm run flow-typed | ||
npm install | ||
2. 服务器 | ||
2. 服务器 | ||
若使用反向代理,需在本地安装好 nginx,配置文件在 **config/nginx.conf** 中,启动 nginx : | ||
start nginx | ||
start nginx | ||
若不使用反向代理,更改 **scripts/index.js** 中 [BrowserSync](https://www.browsersync.io/) 插件的配置即可。 | ||
若不使用反向代理,更改 **scripts/index.js** 中 [BrowserSync](https://www.browsersync.io/) 插件的配置即可。 | ||
3. 启动项目(开发环境) | ||
3. 启动项目(开发环境) | ||
npm run start | ||
npm run start | ||
4. 执行代码类型检查 | ||
4. 执行代码类型检查 | ||
如果是写的 `.js, .jsx`,那么运行: | ||
针对 `.ts, .tsx` 文件,运行: | ||
npm run flow | ||
npm run type-check | ||
如果是写的 `.ts, .tsx`,那么运行: | ||
针对所有文件,运行: | ||
npm run tsc | ||
npm run lint | ||
5. 执行代码测试 | ||
5. 执行代码测试 | ||
npm run test | ||
6. 生成 jsdoc 文档 | ||
6. 生成 jsdoc 文档 | ||
npm run jsdoc | ||
npm run doc | ||
7. 构建生产环境代码,将会在 **build/** 目录中生成部署代码 | ||
7. 构建生产环境代码,将会在 **build/** 目录中生成部署代码 | ||
npm run build | ||
npm run build |
@@ -0,1 +1,3 @@ | ||
/* eslint-disable */ | ||
/*! starter && build */ | ||
@@ -26,3 +28,3 @@ | ||
// eslint-disable-next-line | ||
console.log('--------- Clean up the build directory is complete ! -----------\n'); | ||
console.log('--------- Clean up the build directory is complete ! -----------\n') | ||
@@ -29,0 +31,0 @@ // webpack |
/* App entry file */ | ||
// @flow | ||
// enable global async functions | ||
@@ -12,3 +10,3 @@ import 'regenerator-runtime/runtime' | ||
import { render } from 'react-dom' | ||
import App from 'components/App.jsx' | ||
import App from './components/App' | ||
@@ -15,0 +13,0 @@ const AppRootDOM = document.getElementById('App') |
@@ -26,3 +26,3 @@ /*! input-validation */ | ||
*/ | ||
export default function validation(input, type, regexp = DEFAULT_REGEXP[type]) { | ||
export default function validation(input, type, regexp = DEFAULT_REGEXP[type]): boolean { | ||
if (input === undefined) { | ||
@@ -29,0 +29,0 @@ return false |
{ | ||
"compilerOptions": { | ||
"sourceMap": true, | ||
"jsx" : "preserve" | ||
"jsx": "preserve", | ||
"rootDir": ".", | ||
"resolveJsonModule": true, | ||
"esModuleInterop": true, | ||
"strictNullChecks": true, | ||
"noImplicitThis": true | ||
// "noImplicitAny": true | ||
}, | ||
"include": [ | ||
"src/**/*" | ||
], | ||
"exclude": [ | ||
"node_modules", | ||
"**/*.spec.ts" | ||
] | ||
} | ||
"include": ["src", "scripts", "config"], | ||
"exclude": ["node_modules", "docs", "public", "src/vendors/**/*", "**/*.spec.ts"] | ||
} |
# Create Web App | ||
> **Starting with version `3.0`, [flow.js][0] will no longer be used, and [typescript][1] will be used instead.** | ||
[0]: https://flow.org/ 'Flow: A Static Type Checker for JavaScript' | ||
[1]: http://www.typescriptlang.org/ 'TypeScript is a typed superset of JavaScript that compiles to plain JavaScript' | ||
:coffee: Create PWA(Progressive Web App) project development environment startup configuration. | ||
@@ -9,4 +14,4 @@ | ||
- create-web-app | ||
- create-react-app | ||
- create-web-app | ||
- create-react-app | ||
@@ -17,3 +22,3 @@ `create-web-app` builds a PWA that doesn't depend on any development framework, while `create-react-app` builds PWA based on React framework ecosystems such as React.js, Redux.js, and React Router. | ||
- You don't need to install the package on your computer, you can use it and run: | ||
- You don't need to install the package on your computer, you can use it and run: | ||
@@ -31,3 +36,3 @@ ``` | ||
- You can also install the package on your computer, use it to run: | ||
- You can also install the package on your computer, use it to run: | ||
@@ -47,2 +52,2 @@ ``` | ||
For more information, read `packages/*app/README.md` file contents. | ||
For more information, read `packages/*app/README.md` file contents. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
1970
50
630216
90