ydj-fe / ts-react-vite_or_webpack Goto Github PK

View Code? Open in Web Editor NEW

365.0 13.0 118.0 4.45 MB

a starter-template with typescript, react, mobx and vite/webpack...

Home Page: https://starter.jackple.com/

License: MIT License

JavaScript 3.39% TypeScript 87.95% SCSS 7.52% Shell 0.27% HTML 0.86%

typescript react starter-template mobx admin-dashboard admin-template webpack5 vite vitejs

ts-react-vite_or_webpack's People

Contributors

Stargazers

Watchers

Forkers

xiodra klk2 cj50353 wfatec nick121212 togoog 2903710916 lijoah hzzcc ttoommbb 872409 seawenzhu msdgwzhy6 merzoo gesnowboy aweijie liwan11123123 shiguanglideqi super-html5 zhangshaoliu maple13 rpdg jiangjinjin1 tntcccc tanteichang chuyun unrealfeather yumo-mt marsandheart bicfe gaoqingaoping androidlei mrgu1609 phf-opensource-com-cn jiebaibai timoyan wxl448627487 qjwvtd pcg92 xiyuan-code coyhom bwisgood hsqcoollaughing eason1999 venusjason authorjim lori-yez sam694260665 justmd5 heisenberg289 rachelren leizp heartrainy dingxinh5publicity yujiantao4616 shleyz pauloved perfect-xu liushuai121998 zhengshengliang messi2288 humans96 anndream jz-fe anthhub zonelabyrinth 13168335674 julescesar pianzhideshalou drxiao1 luf543 jomartinezzhu poundhu skt-shurima xingzichen chowkings hungeroxc xyhust204 coolphk panboyu bestpky blckrabbit tylvke xingbohui geraan fanshuaibing unco999 prpr2012 mickeymouse-lh ming995 sulaomo endfalse olinlee porokhva jumpingfinger huyoo walkalone0325 chenfei-hnu he77xtl religiones

ts-react-vite_or_webpack's Issues

可否添加单元测试？

当代码写到一定量的时候，我遇到了一些很奇怪的问题，语法通过，但是运行报错，代码是之前写的代码，并没有做改动，然后修复它，之后又有其他地方出现bug，于是觉得单元测试很有必要集成进来，减少二次修改带来的额外测试负担

css-modules-typescript-loader!.

ERROR in ./src/index.scss (./node_modules/cache-loader/dist/cjs.js??ref--5-1!./node_modules/css-modules-typescript-loader!./node_modules/css-loader??ref--5-3!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--5-5!./src/index.scss)
Module build failed (from ./node_modules/css-modules-typescript-loader/index.js):
Error: No exported locals found for /Users/xueyuan/Desktop/Denv/ts/ts-react-webpack/src/index.scss

不能commit

> lint-staged
		
		Config could not be found.
		
		Please make sure you have created it correctly.
		See https://github.com/okonet/lint-staged#configuration.
		npm ERR! code ELIFECYCLE
		npm ERR! errno 1
		npm ERR! [email protected] lint-staged: `lint-staged`
		npm ERR! Exit status 1
		npm ERR!
		npm ERR! Failed at the [email protected] lint-staged script.
		npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm run dev 报错

npm i 之后，什么也没改动，npm run dev 就报错了
ERROR in ./src/containers/shared/App/index.tsx 34:11
Module parse failed: Unexpected token (34:11)
You may need an appropriate loader to handle this file type.
| var Home = Loadable({
| loader: function loader() {

return import(

| /* webpackChunkName: "home" */
| '@views/Home');
@ ./src/index.tsx 15:0-36 30:7-16
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx

替换mobx-react，使用mobx-react-lite？

能够有个分支，替换mobx-react，使用mobx-react-lite？

请问下二级菜单怎么添加？添加了children 后无效

react-loadable依赖的react版本太老

现在有一个问题，react-loadable 依赖的版本是16.0.0，项目依赖高于 16.8.6 会提示下边的错误
react-dom.development.js?5729:12357 Warning: componentWillMount has been renamed, and is not recommended for use，请问版主是怎么解决的

我仿照了这边配置来配置，但是出错了，可以帮我看看嘛？

这个是全部的配置：
const path = require("path");
const webpack = require("webpack");
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
mode: process.env.NODE_ENV === "production" ? "production" : "development",
entry: {
bundle: path.resolve(__dirname, "src/main.tsx")
},

output: {
path: path.resolve(__dirname, "dist/"),
publicPath: path.resolve(__dirname, "dist"),
filename: process.env.NODE_ENV === "production" ? "[name].[chunkhash:8].js" : "[name].js",
chunkFilename: process.env.NODE_ENV === "production" ? "[name].[chunkhash:8].chunk.js" : "[name].js",
},

devtool: "source-map",

resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: [".ts", ".tsx", ".js"]
},

module: {
rules: [
{
test: /.(ts(x?)|js(x?))$/,
use: [
{
loader: "awesome-typescript-loader",
options: {
transpileOnly: true,
useCache: true,
cacheDirectory: path.resolve(__dirname, ".cache-loader"),
useBabel: true,
babelOptions: {
babelrc: false,
plugins: ["react-hot-loader/babel"]
}
}
}
],
exclude: /node_modules/
},
// {
// enforce: "pre",
// test: /.js$/,
// loader: "babel-loader",
// exclude: /node_modules/
// },
{
test: /.less$/,
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
},
{
test: /.(jpeg|png|jpg|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10000
}
}
]
}
]
},

plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "index.html"),
title: "blog",
inject: false,
minify: {
removeComments: true,
collapseWhitespace: true
},
chunksSortMode: "dependency"
}),
// new ExtractTextPlugin({ filename: "[name].css", allChunks: true }),
// new webpack.HotModuleReplacementPlugin(),
// new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字
],

watch: true,
target: "web"
// devServer: {
// contentBase: path.join(__dirname, "dist"),
// compress: true,
// port: 9000,
// host: "0.0.0.0",
// hot: true
// }
};

错误信息是：

ERROR in ./src/components/index/index.tsx
Module build failed (from ./node_modules/awesome-typescript-loader/dist/entry.js):
SyntaxError: /home/joah/workspace/my-blog/src/components/index/index.tsx: Unexpected token (19:16)
17 | }
18 | Index.prototype.render = function () {

19 | return (

| ^
20 |
index

21 |
);
22 | };
at Parser.pp$5.raise (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$3.parseExprAtom (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3750:12)
at Parser.pp$3.parseExprSubscripts (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3474:19)
at Parser.pp$3.parseExprOps (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3344:19)
at Parser.pp$3.parseParenAndDistinguishExpression (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3828:26)
at Parser.pp$3.parseExprAtom (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3709:19)
at Parser.pp$3.parseExprSubscripts (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3474:19)
at Parser.pp$3.parseExprOps (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3344:19)
at Parser.pp$3.parseExpression (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3306:19)
at Parser.pp$1.parseReturnStatement (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2078:26)
at Parser.pp$1.parseStatement (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:1848:19)
at Parser.pp$1.parseBlockBody (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseBlock (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2247:8)
at Parser.pp$3.parseFunctionBody (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:4235:22)
at Parser.pp$1.parseFunction (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2386:8)
at Parser.pp$3.parseFunctionExpression (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3760:17)
at Parser.pp$3.parseExprAtom (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3722:19)
at Parser.pp$3.parseExprSubscripts (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3474:19)
at Parser.pp$3.parseExprOps (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3344:19)
at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3367:23)
@ ./src/main.tsx 9:0-45 10:32-37
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
4 modules

Index.prototype.render = function () {

19 | return (

| ^
20 |
index

21 |
);
22 | };

《感觉像是没有识别 jsx 的语法》

浏览器返回前进,导航条状态不能更新

浏览器点击返回和前进, 导航条状态不能更新, 应该日和解决呢?

我写了一个简易的docker 支持

本地测试成功，需要如何提交?

兄逮，集成这个，解决你菜单问题

https://github.com/ant-design/ant-design-pro-layout

How easily could Ant Design could be replaced by Ant Design Pro?

可否考虑添加docker 的支持？

目前遇到这种情况，在linux 下构建出错。

Dockerfile 这是我的dockerfile 文件
`

Stage 0, "build-stage", based on Node.js, to build and compile the frontend

FROM node:8.12 as build-stage
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
RUN npm run build:prod

Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx

FROM nginx:1.15.4
COPY --from=build-stage /app/dist/prod/ /usr/share/nginx/html

Copy the default nginx.conf provided by tiangolo/node-frontend

COPY --from=build-stage /app/_nginx/kaixinliao.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/_nginx/nginx.conf /etc/nginx/nginx.conf

async Validate setting message value.

使用了你的这个项目。
{getFieldDecorator('confirm', {
rules: [
{
required: true,
pattern: /^[0-9a-zA-Z!@#$%^&*(){}:"|>?[];,./-=_+]{6,16}$/,
message:

{this.errMsg}

}
]
})(
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
maxLength={16}
onKeyUp={this.passwordEquar}
type="password"
placeholder="确认密码"
/>
)}

我想校验两次密码是否相同。
errMsg 在使用setstate设置值无效。
是因为setstate 是异步的缘故？

passwordEquar = (e: React.FormEvent): void => {
e.preventDefault()
let form = this.props.form
if (!form.getFieldError('confirm')) {
if (form.getFieldValue('password') !== form.getFieldValue('confirm')) {
console.log('密码不一致')
this.setState({
errMsg: '密码不一致'
})
}
}
}

运行起来怎么连api 或者配api

{
"code": 10001,
"data": "token过期",
"flag": 0,
"msg": "error_token"
}

做后端的。。。。这个咋用。谢谢

webpack config about openBrowser

plugin.js中

openBrowser('http://localhost:8080')

但是实际的端口并不一定是8080

关闭

针对于<=IE10的浏览器兼容

你的思路很清晰，结构也合理！但是，你应该没有考虑浏览器兼容性，针对于<=IE10的浏览器怎么处理呢？

build以后index.html并没有存在于dist文件夹

为什么dist没有index.html啊？

vite 版本缺少 index.html ，及运行报错

增加 index 后，scss 文件是存在的，提示错误 Internal server error: Can't find stylesheet to import 。
预计 scss 与 vite 编译需要转译特殊符号

idea scss cannot resolve file是如何解决的，运行打包均未出错

How to compatible with IE ?

What modifications do compatible IE need to make?

感兴趣此项目期望加入成为开源开发者

可否添加 PWA 的支持？

PWA 使用问题。

修改接口，sw.js 默认会缓存上一次的接口，修改页面也是

Add intl

I think that any good starter requires i18n

关于antd按需加载的疑问

module.exports = [
    {
        test: /\.(j|t)sx?$/,
        include: [resolve('src')],
        use: [
            cacheLoader,
            threadLoader(),
            {
                loader: 'babel-loader',
                options: {
                    babelrc: false,
                    presets: [['@babel/preset-env'], '@babel/preset-typescript', '@babel/preset-react'],
                    plugins: [
                        ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],
                        ['@babel/plugin-proposal-decorators', { legacy: true }],
                        ['@babel/plugin-proposal-class-properties', { loose: true }],
                        '@babel/plugin-syntax-dynamic-import',
                        'react-hot-loader/babel'
                    ]
                }
            }
        ],
        exclude: /node_modules/
    }
]

这是webpack.config的内容，其中关于antd按需加载的

 ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],

可是后面

exclude: /node_modules/

不是已经排除所有node_modules的包（包括antd）了哈，那按需加载就不应该有效果呀（实际上又是有效果的，而且我删除 ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],之后，还是有效果，这是为啥呢），帮忙解释一下吗。

还有就是我加入antd-mobile之后，也是配置按需加载，

 ["import", { libraryName: "antd-mobile", style: "css" }, 'antd-mobile'],
                        ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }, 'antd'],

或者

["import", { libraryName: "antd-mobile", style: "css" }],
                        ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],

antd-mobile样式也是加载不出来
有空解答一下哈，谢谢

rn脚手架

兄弟有没有rn脚手架。

Failed to load locale-data

Im trying to open the demo site but im getting this error:

app.6.f4a737e9b554cbfd3a8a.js:40 GET https://g.alicdn.com/react-intl-universal/locale-data/1.0.0/en.js net::ERR_CERT_AUTHORITY_INVALID
(anonymous) @ app.6.f4a737e9b554cbfd3a8a.js:40
(anonymous) @ app.6.f4a737e9b554cbfd3a8a.js:12
value @ app.6.f4a737e9b554cbfd3a8a.js:12
(anonymous) @ app.6.f4a737e9b554cbfd3a8a.js:40
Promise.then (async)
value @ app.6.f4a737e9b554cbfd3a8a.js:40
value @ app.6.f4a737e9b554cbfd3a8a.js:40
Vu @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
$u @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
(anonymous) @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
(anonymous) @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:31
Ma @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
Na @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
Ca @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
_a @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
Ju @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
ja @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
La @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
(anonymous) @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
(anonymous) @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
Ra @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
Ba @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
render @ vendor.dll.08b64101.js?__WB_REVISION__=1d000de8e7608128bfd071a7d487a00b:22
(anonymous) @ app.6.f4a737e9b554cbfd3a8a.js:40
d @ manifest.a20ad5a8efa5a0f1797b.js:1
(anonymous) @ app.6.f4a737e9b554cbfd3a8a.js:12
d @ manifest.a20ad5a8efa5a0f1797b.js:1
r @ manifest.a20ad5a8efa5a0f1797b.js:1
t @ manifest.a20ad5a8efa5a0f1797b.js:1
(anonymous) @ app.6.f4a737e9b554cbfd3a8a.js:1
app.6.f4a737e9b554cbfd3a8a.js:40 Uncaught (in promise) Error: Failed to load https://g.alicdn.com/react-intl-universal/locale-data/1.0.0/en.js
    at HTMLScriptElement.<anonymous> (app.6.f4a737e9b554cbfd3a8a.js:40)

Asset size exceeds the recommended limit

Hi, thanks for this boilerplate, Im using it in all my react projects.

I have a doubt, When I execute the build for production Im getting the following message:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.23 MiB)
      static/js/manifest.afa9dd1218acd8b9e0e9.js
      static/css/split-vendor.0.d0eb07cce6a0bc77d6a7.css
      static/js/split-vendor.0.496b6c66170658a3896e.js
      static/css/app.1.cb78b99e0d79844339ad.css
      static/js/app.1.79d4b602a734eb46094a.js

The split-vendor.js size is 2.1MB.

How can I reduce the size of this file? Thanks

RrouterStore not working using createBrowserHistory

Hi, I know that this issue is not problem from this repo, but maybe you know why im getting the following problem:

I changed the Provider element to use createBrowserHistory instead createHashHistory, but when I use routerStore.push('/') the url in the browser changes, but the view nots.

Any idea? thanks!

可否给个降级到mobx4的版本的方案呢？

可否给个降级到mobx4的版本的方案呢？
降级过后是否需要改动源码的api？

目前用此架构写手机站