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 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
Prototype框架详解
Nov 25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
全面解析bootstrap格子布局
May 22 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
vue-rx的初步使用教程
Sep 21 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php报错502badgateway解决方法
2019/10/11 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python抓取百度查询结果的方法
2015/07/08 Python
python实现数据写入excel表格
2018/03/25 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
销售员自我评价怎么写
2013/09/19 职场文书
设备管理实施方案
2014/05/31 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2015年双拥工作总结
2015/04/08 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电