Nuxt升級2.0.0時出現的問題
喜大普奔,Nuxt終於正式釋出2.0了,最近趁熱把部落格從1.4升級到了2.0,並且用Typescript重構了下,可以點Jooger.me看下,在升級Nuxt過程中出現了一個小問題
關於release 2.0的公告可以檢視官網的Release Notes以及官方的ofollow,noindex">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' })) } }) } 複製程式碼