1.element-ui按需加载时没有引入对应的css文件
解决方案:使用ts-import-plugin插件
const path = require('path')
const tsImportPluginFactory = require('ts-import-plugin')
const camel2Dash = require('camel-2-dash')
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
transpileOnly: true,
getCustomTransformers: () => ({
before: [tsImportPluginFactory({
libraryName: 'element-ui',
libraryDirectory: 'lib',
camel2DashComponentName: true,
style: (_path) =>
path.join('element-ui', 'lib', 'theme-chalk', `${
camel2Dash(path.basename(_path, '.js'))}.css`),
})]
}),
compilerOptions: {
module: 'es2015'
},
appendTsSuffixTo: [/\.vue$/],
}
},
这样就可以删除之前的 babel-plugin-component 按需引入代码了
2.vscode解析ts的装饰器时,报错
Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead
解决办法:在.eslintrc文件中添加legacyDecorators: true,该配置在babel-eslint 10.*的版本生效,在11之后取消了该配置,找了好久,在babel-eslint的issues中找到对应的配置
"parserOptions": {
"parser": "babel-eslint", // 交给babel处理es6语法
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"legacyDecorators": true
}
}
3.在vue原型上添加属性或方法时,需要在添加声明文件,扩展vue模块。
我这边添加的vue.d.ts文件(该文件要在tsconfig.json配置的include包含的文件之中)
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$test: any // 测试
$api: any // axios封装
}
}
添加完,如果vscode还报错,重启vscode就可以了(貌似新建的声明文件必须重启......真是坑)
4.集成jsx
1.需要添加jsx声明文件(eg:jsx.d.ts文件)
import Vue, { VNode } from "vue"
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
2.tsconfig.json中设置"jsx": "preserve"
3.将vue组件改成tsx文件
例如:test.jsx
import Vue, { CreateElement } from 'vue'
import Component from 'vue-class-component'
@Component
export default class Test extends Vue {
count:number = 0
render (h: CreateElement) {
return <div id="foo" onClick={this.increment}>【{this.count}】</div>
}
increment () {
this.count++
}
}
4.webpack中对tsx文件先进行进行babel转码配置
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
/* 此处是针对element-ui的按需引入,如果不是该UI可去掉该配置
transpileOnly: true,
getCustomTransformers: () => ({
before: [tsImportPluginFactory({
libraryName: 'element-ui',
libraryDirectory: 'lib',
camel2DashComponentName: true,
style: (_path) =>
path.join('element-ui', 'lib', 'theme-chalk', `${
camel2Dash(path.basename(_path, '.js'))}.css`),
})]
}),
compilerOptions: {
module: 'es2015'
},
*/
appendTsSuffixTo: [/\.vue$/],
}
}
]
},
5.如果配置了eslint,并且使用的eslint:recommend规则,需要设置关闭变量未使用规则,no-unused-vars:'off'
因为在tsx中使用jsx时必须显示的传递h,然后在代码编写时不需要该方法
最后备注我理解的声明文件(*.d.ts):
在ts的老版本,各类库没有写对应的声明文件,需要自己手动写声明文件,才能在ts中写获取对应类库的一些属性或方法(上述vue的声明文件中是针对vue进行扩展,vue的声明文件已经在该包中定义),之后各类库往ts靠齐,基本都统一给自己的类库加上了types声明文件(在类库的package.json中types或typing指定),typescript会在引入对应包时通过package.json找到对应的声明文件。