内容简介：然后重命名src下的任何文件为index.tsx，重启你的server就ok了。确实还是比较不错的。会自动生成tsconfig.json，当然，你是可以修改的。除此之外
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest $ # or $ yarn add typescript @types/node @types/react @types/react-dom @types/jest
然后重命名src下的任何文件为index.tsx，重启你的server就ok了。确实还是比较不错的。
会自动生成tsconfig.json，当然，你是可以修改的。
除此之外 create-react-app-typescript 也是你的选择。
create-react-app 中使用 typescript 之debug
正常情况下，你生成的脚本是包含sourcemap文件的，如果你的文件都是js后缀结尾的，还是比较容易debug的，我也是这样debug的。你说惨不惨。
debug很大程度依赖你的IDE, create-react-app推荐的VSC.
简单总结
- 安装VSC插件Debugger for Chrome
- 配置debug配置
自定义service worker
最开始是想通过 react-app-rewire-workbox 来实现，结果尝试的时候失败了。
记一次基于react、cra2、typescript的pwa项目由开发到部署 这篇文章里面提到了,核心代码如下
module.exports = {
webpack: function (config, env) {
// typescript的配置插件
config = rewireTypescript(config, env);
if (env === 'production') {
// 在 ‘production’ 模式下加入自己的配置
const workboxConfigProd = {
swSrc: path.join(__dirname, 'public', 'cus-service-worker.js'),
swDest: 'cus-service-worker.js',
importWorkboxFrom: 'disabled'
}
// 删除默认的WorkboxWebpackPlugin配置
config = removePreWorkboxWebpackPluginConfig(config)
// 加入我们的配置
config.plugins.push(new workboxPlugin.InjectManifest(workboxConfigProd))
}
return config
}
}
// 此函数用来找出 默认配置中的 WorkboxWebpackPlugin， 并把它删除
function removePreWorkboxWebpackPluginConfig (config) {
const preWorkboxPluginIndex = config.plugins.findIndex((element) => {
return Object.getPrototypeOf(element).constructor.name === 'GenerateSW'
})
if (preWorkboxPluginIndex !== -1) {
config.plugins.splice(preWorkboxPluginIndex, 1)
}
return config
}
原理就是
- 删除原来的默认插件
- 添加自定义的插件
亲自尝试可以。 额外提一下， 其实内置的配置在
\node_modules\react-scripts\config是可以查看到的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- [Vue 2.x Todo 教程练习参考答案] 标为完成练习参考答案
- [Vue 2.x Todo 教程练习参考答案] 添加todo练习参考答案
- [Vue 2.x Todo 教程练习参考答案] 入门仪式_Hello_Vue练习参考答案
- 一些问题的答案
- Runtime经典面试题(附答案)
- Java面试要点-数据存储-精简答案
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
