解决用webstorm打开taro小程序项目,无法识别@的问题

870 阅读1分钟

1、根目录创建webstorm.config.js,内容如下:

/**
 * 由于 taro 不再使用传统的 webpack 配置文件,故 WebStorm 无法识别别名
 * 本文件对项目无任何作用,仅作为 WebStorm 识别别名用
 * 进入 WebStorm settings -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可
 * */

'use strict'
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.vue', '.json', 'jsx', 'scss', '.ts', '.tsx'],
        alias: {
            '@': resolve('src')
        }
    }
}

2、webstorm配置settings

进入 WebStorm settings -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可

image.png

3、配置后发现在typeScript的ts中无效

在tsconfig.json文件中增加

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}
{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "removeComments": false,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "outDir": "lib",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "baseUrl": ".",
    "rootDir": ".",
    "jsx": "react-jsx",
    "allowJs": true,
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["./src", "global.d.ts"],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "compileOnSave": false
}

此文件中的paths要和webpack中的alias配置一致,且baseURl不能省略