ying-template
项目信息
这是一个基于 webpack@^5.27.2 + typescript@^4.2.3 + @babel/core@^7.2.2 + jest@^26.6.3 + eslint@^7.22.0 的多页面脚手架。
本库支持增量更新，支持 gzip 打包，支持第三方资源别名引入，支持静态文件引入，支持使用环境变量。
运行环境
安装配置
- 下载并安装 node: https://nodejs.org/zh-cn/download/
运行命令
# 安装依赖
yarn
# 启动开发服务器
yarn dev
# 项目打包
yarn build
# 单元测试
yarn jest
# css 代码自动格式化
yarn lint:css
# js 代码自动格式化
yarn lint:js
# js & css 代码自动格式化
yarn lint
# 代码格式测试以及纠正
yarn prettier
# 一键上传以及格式化源码
yarn cz
项目说明
项目结构
│ .babelrc // babel配置文件
│ .editorconfig // 编辑器配置
│ .env // 环境变量配置
│ .eslintignore // eslint忽略配置
│ .eslintrc // eslint配置
│ .gitignore // git忽略配置
│ .prettierignore // prettier忽略配置
│ .prettierrc // prettier配置
│ build.sh // bash脚本
│ jest.config.js // Jest配置文件
│ LICENSE // LICENSE许可
│ package-lock.json
│ package.json
│ postcss.config.js // postcss配置文件
│ README.md // 项目说明文档
│ tsconfig.json // ts语言配置
│
├─config // 核心配置
│ config.js // 根配置
│ webpack.config.base.js // 基础配置
│ webpack.config.dev.js // 开发环境配置
│ webpack.config.prod.js // 生产环境配置
│
├─coverage // 单元测试结果文件
|
├─src // 用户代码
│
├─static // 静态资源
│
├─tests // 测试文件夹
│
└─views // 页面目标
格式化方案
prettier
格式化方案为 prettier，主要配置如下：
// ./.prettierrc
{
"tabWidth": 4,
"printWidth": 80,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "avoid",
"requirePragma": false,
"endOfLine": "auto"
}
prettier文档链接如下：
eslint
代码格式验证规则为eslint，主要配置如下：
// ./.eslintrc
"rules": {
"indent": [0, 4],
"arrow-parens": 0,
"generator-star-spacing": 0,
"no-debugger": 0,
"eol-last": 0,
"eqeqeq": 2,
"camelcase": 0,
"space-before-function-paren": 0,
"quotes": ["error", "single"],
"@typescript-eslint/explicit-function-return-type": [
"off",
{
"allowExpressions": true,
"allowTypedFunctionExpressions": true
}
],
"@typescript-eslint/no-explicit-any": "off",
"prettier/prettier": "error",
"no-var": "error",
"@typescript-eslint/consistent-type-definitions": ["error", "interface"]
}
eslint文档链接如下：
提交规范
代码提交规范使用 cz-customizable，配置文件为.cz-config.js，主要配置如下：
const czConfig = {
...,
types: [
{ value: 'feat', name: '特性: 新增一个功能' },
{ value: 'fix', name: '修复: 修复一个Bug' },
{ value: 'docs', name: '文档: 文档变更' },
{ value: 'style', name: '格式: 代码格式' },
{ value: 'refactor', name: '重构: 代码重构' },
{ value: 'perf', name: '性能: 改善性能' },
{ value: 'test', name: '测试: 测试代码' },
{
value: 'build',
name:
'工具: 变更项目构建或外部依赖（例如scopes: webpack、gulp、npm等）',
},
{
value: 'ci',
name:
'集成: 更改持续集成软件的配置文件和package中的scripts命令，例如scopes: Travis, Circle等',
},
{
value: 'style',
name: '代码格式（不影响功能，例如空格、分号等格式修正）',
},
{
value: 'revert',
name: '回退: 代码回退',
},
{
value: 'revert',
name: '回退: 代码回退',
},
],
}
使用方式，利用 git cz 代替 git commit
文档链接：
https://github.com/leoforfree/cz-customizable
容器化
ying-template 添加了 Docker 部署 nginx 服务器的脚本。执行命令如下：
yarn build
docker-compose up
Dockerfile 内容如下
FROM nginx:1.13.12-alpine as production-stage
ENV SERVER_PORT=$SERVER_PORT \
EXPOSE_PORT=$EXPOSE_PORT \
CONTAINER_NAME=$CONTAINER_NAME \
IMAGE_NAME=$IMAGE_NAME
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf
COPY dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
EXPOSE ${SERVER_PORT}
docker-compose.yml 内容如下：
version: '3.7'
services:
ying-front:
env_file:
- .env
container_name: ${CONTAINER_NAME}
image: ${IMAGE_NAME}
build:
context: .
dockerfile: Dockerfile
volumes:
- ./dist:/usr/share/nginx/html:ro
ports:
- target: ${EXPOSE_PORT}
published: ${SERVER_PORT}
protocol: tcp
mode: host
关于 Docker 的教程，推荐大家看这个网站：https://yeasy.gitbooks.io/docker_practice/content/ ，具体语法就不作说明了
因为不想把镜像弄得太大，所以项目打包是在 docker build 之前完成的，有需要的可以根据各位 DEVOPS 的实际情况来修改
适配方案
适配方案为 postcss-px-to-viewport ，主要配置如下：
// ./postcss.config.js
pxToViewport({
unitToConvert: 'px',
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
mediaQuery: false,
}),
postcss-px-to-viewport 文档链接：
https://evrone.com/postcss-px-viewport
CSS 语法方案
CSS 语法方案为 precss，主要配置如下：
// ./postcss.config.js
precss({
stage: 3,
features: {
'color-mod-function': { unresolved: 'warn' }
}
}),
precss文档链接：
https://github.com/jonathantneal/precss
ECMA 语法方案
基础方案
ECMA 语法的基础方案为@babel/preset-env，主要配置如下：
// ./.babelrc
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"esmodules": true,
"chrome": "60",
"ie": "10"
}
}
],
"@babel/preset-typescript"
],
@babel/preset-env文档如下：
https://babeljs.io/docs/en/babel-preset-env
拓展语法
可按需增删需要的 ECMA 提案插件，主要配置如下：
// ./.babelrc
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-private-methods",
{
"loose": true
}
]
]
typescript
支持typescript@4.2.3语法，typescript文档链接如下：
https://www.typescriptlang.org/
环境变量
使用者可在根目录下的.env文件添加环境变量，示例如下：
HOST=0.0.0.0 # 运行host
PORT=8099 # 运行端口
VERSION=2.0.0 # 当前项目版本
PUBLIC_PATH=/ # 公共路径 https://webpack.js.org/guides/public-path/
WATCH_ANALYZER=false # 生产环境下是否看火焰图
IS_MOBILE=false # 判断是否是移动端，如果是，则打开postcss-px-to-viewport
单元测试
基本说明
本库使用的单元测试框架为jest@^26.6.3，jest@^26.6.3文档链接如下：
注意事项
jest 测试 dom 时，相关代码需要包裹在 window.onload 里，否则会报错。例如
'use strict'
import '@/style/index.css'
import qrcodeImg from 'static/img/qrcode-all1.png'
window.onload = () => {
const radio = 0.25
const width = 914
const height = 439
const qrcode: Element = document.querySelector('.qrcode')
qrcode.setAttribute('src', qrcodeImg)
console.group('%c快来撩我啊', 'color: #894e54; font-size: 60px;')
console.log(
'%c+',
`
font-size: 1px;
padding: ${height * radio}px ${width * radio}px;
background-image: url(https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/qrcode-all1.png);
background-size: contain;
background-repeat: no-repeat;
color: transparent;
`,
)
console.groupEnd()
}
export const add = (a: number, b: number): number => a + b
其他配置
第三方插件 URL 引入
当用户使用 url 的形式（例如 CDN）引入第三方 JS 文件时，可通过 ./config/webpack.config.base.js 的 externals 进行配置，例子如下：
const baseConfig = {
//...
externals: {
// ...
jquery: 'jQuery',
},
}
请求转发
用户可以在 ./config/webpack.config.dev.js 里的 devServer.proxy 进行转发请求配置，例子如下：
const webpackDev = {
//...
devServer: {
// ...
proxy: {
'/api': 'http://localhost:3000',
},
},
}
文档链接：
https://webpack.js.org/configuration/dev-server/#devserverproxy
路径重定向
用户可以在 ./config/config.js 里的 dev.alias 配置路径重定向，例子如下：
const config = {
// ...
dev: {
alias: {
static: resolve('static'),
},
},
}
// .js/ts里
import '@/style/index.css'
// .css里
// background: url('~static/img/qrcode-all1.png') 50% 50% / cover no-repeat;
文档链接：
https://webpack.js.org/configuration/resolve/#resolvealias
后记
如果你喜欢探讨技术，或者对本仓库有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。鱼头的微信号是：krisChans95也可以扫码关注公众号，订阅更多精彩内容。
-
就离了大谱，一直出现这个错误，找了半天错误，就是没有想到最简单的拼写错误。就是说，有错了咱一定要仔细看报错信息，ok? 以下是我的报错内容 2022-06-13 15:22:24.903 ERROR 111252 --- [nio-8080-exec-1] org.thymeleaf.TemplateEngine : [THYMELEAF][http-nio-8080-ex
-
问题内容： 我已按照本教程进行操作：http : //golang.org/doc/articles/wiki/final.go，并根据我的需要/想要对其进行了略微修改。问题是我想在模板中支持HTML。我意识到这是安全隐患，但目前尚无问题。 页面渲染的结果： 让我解释一下代码： 我想要的HTML数据存储在中。这是类型，表示我无法（或可以吗？）运行该函数需要一个字符串。 我有这个预渲染模板： 实际的
-
问题内容： 我在中创建一个变量，并根据条件更改值。但是值的范围仅保留在以下条件内： 在if条件内，我得到正确的值，但在外面。如何在外界条件下使用？有人可以帮我吗？ 问题答案： Go 1.11添加了对更改模板变量值的支持。要定义变量，请使用： 要更改其值，请使用Assignment ： 如果变量在块外创建但在块内更改，则更改将在块后可见。 像这样测试： 输出为（在Go Playground上尝试）：
-
问题内容： 我正在尝试渲染文件。该文件存在于我的项目中，但是当我尝试渲染它时，我一直在获取文件。Flask为什么找不到我的模板？ 问题答案： 你必须在正确的位置创建模板文件。在你的模块旁边的子目录中。 该错误表明目录中没有文件。确保在与python模块相同的目录中创建了该目录，并且确实将文件放在该子目录中。如果你的应用是软件包，则应在软件包内创建模板文件夹。 另外，如果你将模板文件夹命名为而不是其
-
本文向大家介绍你有使用过template标签吗？说说它的用途有哪些？相关面试题，主要包含被问及你有使用过template标签吗？说说它的用途有哪些？时的应答技巧和注意事项，需要的朋友参考一下 HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 maybe)在运行时使用JavaScript实例化。 将模板视为一个可存储在文档中以便
-
问题内容： 我们的应用程序具有2级导航。我们想使用AngularJS 动态地向提供模板。我正在考虑做一些类似的事情： 我只是不知道该如何填充。我知道primaryNav和secondaryNav绑定到$ routeParams，但是如何在这里访问$ routeParams以便动态提供模板？ 问题答案： 我找不到注入和使用该服务的方法（我认为这是一个更好的解决方案），我尝试过这种想法，认为它可能会起
-
问题内容： 当针对Oracle数据库运行时，以下Spring Hibernate模板 （Spring 2.5和Hibernate 3.3.2GA）代码返回的对象的运行时类型是什么，SQL查询是诸如此类的计数查询？ 此代码引发以下异常： 问题答案： 原来，这可能是由于Hibernate标准查询缓存中的错误所致。 解决方案是在查询中添加标量： 参考文献： 带有SQLQuery和setCacheable