Skip to content

Commit 93809e9

Browse files
robinv8robinv8
authored
chore(examples): Add example (#1731)
1 parent 1f662d3 commit 93809e9

18 files changed

+16214
-0
lines changed

‎examples/about-sass-version/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# 关于 sass 语法报错问题
2+
3+
SassError: Undefined operation: "calc($col / 12) times 100%".
4+
5+
```
6+
$width: calc($col / 12) * 100%;
7+
```
8+
9+
## 报错原因
10+
由于 taro 底层升级 node sass 导致的
11+
12+
## 解决方案
13+
14+
方案一：降低 sass 版本
15+
16+
在 package.json 中添加如下配置
17+
```
18+
"resolutions": {
19+
"sass": "1.62.0"
20+
},
21+
```
22+
23+
方案二：升级 taro 相关依赖
24+
25+
在 package.json 中批量替换 taro 相关依赖版本 v3.4.5 及以上版本

‎examples/about-sass-version/babel.config.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// babel-preset-taro 更多选项和默认值：
2+
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
3+
module.exports = {
4+
presets: [
5+
[
6+
'taro',
7+
{
8+
framework: 'react',
9+
ts: true
10+
},
11+
],
12+
],
13+
plugins: [
14+
[
15+
'import',
16+
{
17+
libraryName: 'taro-hooks',
18+
camel2DashComponentName: false
19+
},
20+
'taro-hooks',
21+
]
22+
],
23+
24+
};

‎examples/about-sass-version/config/dev.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* @Descripttion: your project
3+
* @Author: QI
4+
* @Date: 2022-02-16 11:50:13
5+
* @LastEditors: QI
6+
* @LastEditTime: 2022-02-19 15:12:51
7+
*/
8+
module.exports = {
9+
env: {
10+
NODE_ENV: '"development"'
11+
},
12+
defineConstants: {},
13+
mini: {},
14+
h5: {
15+
esnextModules: ["taro-ui"]
16+
}
17+
};

‎examples/about-sass-version/config/index.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/*
2+
* @Descripttion: your project
3+
* @Author: QI
4+
* @Date: 2022-04-01 09:25:23
5+
* @LastEditors: QI
6+
* @LastEditTime: 2022-04-01 12:58:27
7+
*/
8+
import { resolve } from "path";
9+
10+
const config = {
11+
projectName: "taro3-qi-react-cli",
12+
date: "2022-2-16",
13+
designWidth: 750,
14+
deviceRatio: {
15+
640: 2.34 / 2,
16+
750: 1,
17+
828: 1.81 / 2
18+
},
19+
sourceRoot: "src",
20+
outputRoot: "dist",
21+
plugins: ['taro-plugin-compiler-optimization'], // 优化打包速度 编译速度·
22+
defineConstants: {},
23+
copy: {
24+
patterns: [],
25+
options: {}
26+
},
27+
framework: "react",
28+
mini: {
29+
webpackChain(chain, webpack) {
30+
if (process.env.NODE_ENV === 'production') {
31+
chain.optimization.minimize(true); //使体积优化到最小
32+
chain.plugin('analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []); // 体积地图
33+
chain.merge({
34+
plugin: {
35+
install: {
36+
plugin: require('terser-webpack-plugin'),
37+
args: [{
38+
extractComments: true,
39+
test: ['common.js', 'taro.js', 'app.js', 'day.js', 'runtime.js','vendors.js'], //匹配的文件
40+
parallel: true,
41+
terserOptions: {
42+
compress: true, // 默认使用terser压缩
43+
keep_classnames: true, // 不改变class名称
44+
keep_fnames: true, // 不改变函数名称
45+
}
46+
}]
47+
}
48+
}
49+
});
50+
};
51+
},
52+
postcss: {
53+
pxtransform: {
54+
enable: true,
55+
config: {}
56+
},
57+
url: {
58+
enable: true,
59+
config: {
60+
limit: 1024 // 设定转换尺寸上限
61+
}
62+
},
63+
cssModules: {
64+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
65+
config: {
66+
namingPattern: "module", // 转换模式，取值为 global/module
67+
generateScopedName: "[name]__[local]___[hash:base64:5]"
68+
}
69+
}
70+
}
71+
},
72+
h5: {
73+
esnextModules: ["taro-ui"],
74+
publicPath: "/",
75+
staticDirectory: "static",
76+
postcss: {
77+
autoprefixer: {
78+
enable: true,
79+
config: {}
80+
},
81+
cssModules: {
82+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
83+
config: {
84+
namingPattern: "module", // 转换模式，取值为 global/module
85+
generateScopedName: "[name]__[local]___[hash:base64:5]"
86+
}
87+
}
88+
}
89+
},
90+
alias: {
91+
"@": resolve(__dirname, "..", "src"),
92+
"@components": resolve(__dirname, "..", "src/components"),
93+
"@utils": resolve(__dirname, "..", "src/utils"),
94+
"@api": resolve(__dirname, "..", "src/api")
95+
},
96+
97+
};
98+
99+
export default function (merge) {
100+
if (process.env.NODE_ENV === "development") {
101+
return merge({}, config, require("./dev"));
102+
}
103+
return merge({}, config, require("./prod"));
104+
}

‎examples/about-sass-version/config/prod.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
module.exports = {
2+
env: {
3+
NODE_ENV: '"production"',
4+
},
5+
defineConstants: {},
6+
mini: {
7+
8+
},
9+
h5: {
10+
/**
11+
* WebpackChain 插件配置
12+
* @docs https://github.com/neutrinojs/webpack-chain
13+
*/
14+
// webpackChain (chain) {
15+
// /**
16+
// * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
17+
// * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
18+
// */
19+
// chain.plugin('analyzer')
20+
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
21+
22+
// /**
23+
// * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
24+
// * @docs https://github.com/chrisvfritz/prerender-spa-plugin
25+
// */
26+
// const path = require('path')
27+
// const Prerender = require('prerender-spa-plugin')
28+
// const staticDir = path.join(__dirname, '..', 'dist')
29+
// chain
30+
// .plugin('prerender')
31+
// .use(new Prerender({
32+
// staticDir,
33+
// routes: [ '/pages/index/index' ],
34+
// postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
35+
// }))
36+
// }
37+
},
38+
};

‎examples/about-sass-version/global.d.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/// <reference types="@tarojs/taro" />
2+
3+
declare module '*.png';
4+
declare module '*.gif';
5+
declare module '*.jpg';
6+
declare module '*.jpeg';
7+
declare module '*.svg';
8+
declare module '*.css';
9+
declare module '*.less';
10+
declare module '*.scss';
11+
declare module '*.sass';
12+
declare module '*.styl';
13+
14+
declare namespace NodeJS {
15+
interface ProcessEnv {
16+
TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
17+
}
18+
}

‎examples/about-sass-version/package.json

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
"name": "taro3-qi-react-cli",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "taro3创建的react版本脚手架",
6+
"templateInfo": {
7+
"name": "taro-hooks",
8+
"typescript": true,
9+
"css": "sass"
10+
},
11+
"scripts": {
12+
"build:weapp": "taro build --type weapp",
13+
"build:swan": "taro build --type swan",
14+
"build:alipay": "taro build --type alipay",
15+
"build:tt": "taro build --type tt",
16+
"build:h5": "taro build --type h5",
17+
"build:rn": "taro build --type rn",
18+
"build:qq": "taro build --type qq",
19+
"build:jd": "taro build --type jd",
20+
"build:quickapp": "taro build --type quickapp",
21+
"dev:weapp": "npm run build:weapp -- --watch",
22+
"dev:swan": "npm run build:swan -- --watch",
23+
"dev:alipay": "npm run build:alipay -- --watch",
24+
"dev:tt": "npm run build:tt -- --watch",
25+
"dev:h5": "npm run build:h5 -- --watch",
26+
"dev:rn": "npm run build:rn -- --watch",
27+
"dev:qq": "npm run build:qq -- --watch",
28+
"dev:jd": "npm run build:jd -- --watch",
29+
"dev:quickapp": "npm run build:quickapp -- --watch",
30+
"pull": "git pull origin master",
31+
"dev:weappPreview": "taro build --type weapp --watch --env production"
32+
},
33+
"browserslist": [
34+
"last 3 versions",
35+
"Android >= 4.1",
36+
"ios >= 8"
37+
],
38+
"author": "",
39+
"dependencies": {
40+
"@babel/runtime": "^7.7.7",
41+
"@tarojs/cli": "3.4.5",
42+
"@tarojs/components": "3.4.5",
43+
"@tarojs/plugin-framework-react": "3.4.5",
44+
"@tarojs/react": "3.4.5",
45+
"@tarojs/runtime": "3.4.5",
46+
"@tarojs/taro": "3.4.5",
47+
"dayjs": "^1.10.7",
48+
"md5": "^2.3.0",
49+
"mobx": "^4.8.0",
50+
"mobx-react": "^6.1.4",
51+
"rc-codebox": "^1.4.0",
52+
"react": "^17.0.2",
53+
"react-dom": "^17.0.2",
54+
"taro-hooks": "latest",
55+
"taro-ui": "^3.2.0"
56+
},
57+
"devDependencies": {
58+
"@babel/core": "^7.8.0",
59+
"@tarojs/mini-runner": "3.4.5",
60+
"@tarojs/plugin-terser": "^2.2.10",
61+
"@tarojs/webpack-runner": "3.4.5",
62+
"@types/react": "^17.0.2",
63+
"@types/webpack-env": "^1.13.6",
64+
"@typescript-eslint/eslint-plugin": "^4.15.1",
65+
"@typescript-eslint/parser": "^4.15.1",
66+
"babel-plugin-import": "^1.13.3",
67+
"babel-preset-taro": "3.4.5",
68+
"cache-loader": "^4.1.0",
69+
"eslint": "^6.8.0",
70+
"eslint-config-taro": "3.4.5",
71+
"eslint-plugin-import": "^2.12.0",
72+
"eslint-plugin-react": "^7.8.2",
73+
"eslint-plugin-react-hooks": "^4.2.0",
74+
"stylelint": "9.3.0",
75+
"taro-plugin-compiler-optimization": "^1.0.1",
76+
"terser-webpack-plugin": "^3.0.5",
77+
"thread-loader": "^3.0.4",
78+
"typescript": "^4.2.3",
79+
"webpack-bundle-analyzer": "^4.5.0"
80+
},
81+
"engines": {
82+
"node": ">=12.0.0"
83+
}
84+
}

‎examples/about-sass-version/project.config.json

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"miniprogramRoot": "dist/",
3+
"projectname": "塔塔管家",
4+
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
5+
"appid": "wx7a42c5ab005bd5c8",
6+
"setting": {
7+
"urlCheck": false,
8+
"es6": false,
9+
"enhance": false,
10+
"postcss": false,
11+
"preloadBackgroundData": false,
12+
"minified": true,
13+
"newFeature": true,
14+
"coverView": true,
15+
"nodeModules": false,
16+
"autoAudits": false,
17+
"showShadowRootInWxmlPanel": false,
18+
"scopeDataCheck": false,
19+
"uglifyFileName": false,
20+
"checkInvalidKey": true,
21+
"checkSiteMap": true,
22+
"uploadWithSourceMap": true,
23+
"compileHotReLoad": false,
24+
"lazyloadPlaceholderEnable": false,
25+
"useMultiFrameRuntime": true,
26+
"useApiHook": true,
27+
"useApiHostProcess": true,
28+
"babelSetting": {
29+
"ignore": [],
30+
"disablePlugins": [],
31+
"outputPath": ""
32+
},
33+
"enableEngineNative": false,
34+
"useIsolateContext": true,
35+
"userConfirmedBundleSwitch": false,
36+
"packNpmManually": false,
37+
"packNpmRelationList": [],
38+
"minifyWXSS": true,
39+
"disableUseStrict": false,
40+
"minifyWXML": true,
41+
"showES6CompileOption": false,
42+
"useCompilerPlugins": false,
43+
"ignoreUploadUnusedFiles": true,
44+
"useStaticServer": true
45+
},
46+
"compileType": "miniprogram",
47+
"simulatorType": "wechat",
48+
"simulatorPluginLibVersion": {},
49+
"condition": {},
50+
"libVersion": "2.22.0",
51+
"srcMiniprogramRoot": "dist/",
52+
"packOptions": {
53+
"ignore": [],
54+
"include": []
55+
},
56+
"editorSetting": {
57+
"tabIndent": "insertSpaces",
58+
"tabSize": 2
59+
}
60+
}

‎examples/about-sass-version/project.tt.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"miniprogramRoot": "./",
3+
"projectname": "tt-project",
4+
"description": "taro3创建的塔塔管家",
5+
"appid": "touristappid",
6+
"setting": {
7+
"urlCheck": true,
8+
"es6": false,
9+
"postcss": false,
10+
"minified": false
11+
},
12+
"compileType": "miniprogram"
13+
}

0 commit comments

Comments
 (0)