Nuxt升级2.0.0时出现的问题(小结)


Posted in Javascript onOctober 08, 2018

喜大普奔,Nuxt终于正式发布2.0了,最近趁热把博客从1.4升级到了2.0,并且用Typescript重构了下,可以点Jooger.me看下,在升级Nuxt过程中出现了一个小问题

关于release 2.0的公告可以查看官网的Release Notes以及官方的Demo,升级过程十分简单,基本不需要什么迁移成本,所有npm命令都跟以前一样,只需要把一些关联包升级一下即可

今天出现的问题是这样的,随着nuxt升级,webpack和vue-loader也分别升级到了4和15,升级过后,报了如下问题

Invalid source file: ***.vue. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.

一般看到这个extension的问题都下意识地想到webpack的resolve.extensions没有配置.ts或者.tsx扩展,但其实不然,仔细看前半句会发现是在处理.vue文件的时候报的这个错,所以很容易就想到应该是vue-loader的问题了,在vue-loader的这个issue讨论了这个问题

耐心查看完,会发现其实是tslint-loader的typeCheck在作怪,如果开启这个选项,那就会导致上述错误,理由是这个选项导致在构建的时候tslint会lint整个vue文件,而不单单是文件里的ts部分,所以直接解决办法是把tslint-loader的typeCheck去掉

至于为啥会lint全文件,这个后续再验证下,应该是vue-loader15的对vue文件进行拆分时出现问题

而且关掉typeCheck会出现什么问题,目前还未发现

到这里可以其实再进一步思考一下,为啥vue-cli3的tslint没有报错了,看了下vue-cli的ts插件cli-plugin-typescript里的代码

addLoader({
 loader: 'ts-loader',
 options: {
  transpileOnly: true,
  appendTsSuffixTo: ['\\.vue$'],
  // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
  happyPackMode: useThreads
 }
})
// make sure to append TSX suffix
tsxRule.use('ts-loader').loader('ts-loader').tap(options => {
 options = Object.assign({}, options)
 delete options.appendTsSuffixTo
 options.appendTsxSuffixTo = ['\\.vue$']
 return options
})

config
 .plugin('fork-ts-checker')
  .use(require('fork-ts-checker-webpack-plugin'), [{
   vue: true,
   tslint: options.lintOnSave !== false && fs.existsSync(api.resolve('tslint.json')),
   formatter: 'codeframe',
   // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
   checkSyntacticErrors: useThreads
  }])

可以看到它是用了fork-ts-checker-webpack-plugin这个webpack插件,具体什么用途可以看看它的README

所以modules/typescript.js最终配置如下

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = function () {
 // Add .ts extension for store, middleware and more
 this.nuxt.options.extensions.push("ts")
 // Extend build
 this.extendBuild(config => {
  const tsLoader = {
   loader: 'ts-loader',
   options: {
    transpileOnly: true,
    appendTsSuffixTo: [/\.vue$/]
   }
  }
  // Add TypeScript loader
  config.module.rules.push(
   Object.assign({
     test: /((client|server)\.js)|(\.tsx?)$/
    },
    tsLoader
   )
  )
  // Add .ts extension in webpack resolve
  if (config.resolve.extensions.indexOf(".ts") === -1) {
   config.resolve.extensions.push(".ts");
  }

  config.plugins.push(new ForkTsCheckerWebpackPlugin({
   vue: true,
   tslint: true,
   formatter: 'codeframe',
   // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
   checkSyntacticErrors: process.env.NODE_ENV === 'production'
  }))
 })
}

更新

今天在用的时候,发现改了代码save的时候,nuxt会重新hot reload,这时会报如下错误

Error: fork-ts-checker-webpack-plugin hooks are already in use

很明显,是reload过程中,加载了两次,所以modules/typescript.js代码更新如下

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

// 判断时候load过这个plugin
let hasForkTsCheckerPlugin = false

module.exports = function () {
 // Add .ts extension for store, middleware and more
 this.nuxt.options.extensions.push("ts")
 // Extend build
 this.extendBuild(config => {
  const tsLoader = {
   loader: 'ts-loader',
   options: {
    transpileOnly: true,
    appendTsSuffixTo: [/\.vue$/]
   }
  }
  // Add TypeScript loader
  config.module.rules.push(
   Object.assign({
     test: /((client|server)\.js)|(\.tsx?)$/
    },
    tsLoader
   )
  )
  // Add .ts extension in webpack resolve
  if (config.resolve.extensions.indexOf(".ts") === -1) {
   config.resolve.extensions.push(".ts");
  }

  if (!hasForkTsCheckerPlugin) {
   // 第一次load
   hasForkTsCheckerPlugin = true
   config.plugins.push(new ForkTsCheckerWebpackPlugin({
    vue: true,
    tslint: true,
    formatter: 'codeframe',
    // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
    checkSyntacticErrors: process.env.NODE_ENV === 'production'
   }))
  }
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
vue页面切换过渡transition效果
Oct 08 #Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 #Javascript
angular中子控制器向父控制器传值的实例
Oct 08 #Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 #Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 #Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 #Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
PHP加密解密类实例代码
2016/07/20 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
php微信开发之谷歌测距
2018/06/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
pow在python中的含义及用法
2019/07/11 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python中常用的数据结构介绍
2021/01/12 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
项目合作计划书
2014/01/09 职场文书
土地转让协议书
2014/04/15 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
教师聘用意向书
2015/05/11 职场文书
寒假致家长的一封信
2015/10/10 职场文书