React开发中的一些疑虑的答案

栏目: IOS · Android · 发布时间: 6年前

内容简介:然后重命名src下的任何文件为index.tsx,重启你的server就ok了。确实还是比较不错的。会自动生成tsconfig.json,当然,你是可以修改的。除此之外

老的版本应该是不支持, 我记得是支持Flow.

新的版本

Adding TypeScript
$ 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.

简单总结

  1. 安装VSC插件Debugger for Chrome
  2. 配置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
}

原理就是

  1. 删除原来的默认插件
  2. 添加自定义的插件

亲自尝试可以。 额外提一下, 其实内置的配置在

\node_modules\react-scripts\config是可以查看到的。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大话存储

大话存储

张冬 / 清华大学出版社 / 2008-11 / 58.00元

网络存储,是近二十年来的新兴行业。从纸带到硬盘再到大型磁盘阵列,存储系统经历了从简单到复杂,从单块硬盘到存储区域网络(SAN)。网络存储行业目前已经是一个步入正轨的IT行业了。. 网络存储是一个涉及计算机硬件以及网络协议/技术、操作系统以及专业软件等各方面综合知识的领域。目前国内阐述网络存储的书籍少之又少,大部分是国外作品,对存储系统底层细节的描述不够深入,加之术语太多,初学者很难真正理解网......一起来看看 《大话存储》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具