IDE vscode识别webpack中alias配置路径
引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题,最后有人回复的方法只能在ts项目中可以识别
https://segmentfault.com/q/1010000011911879
最后研究了下,发现可以配置解决
项目的webpack
alias: {
'@': require('path').resolve(__dirname, '../src')
},
package.json文件要引入jest的配置,在moduleNameMapper配置"^@/(.*)": "<rootDir>/src/$1"
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^@/(.*)": "<rootDir>/src/$1"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
}
根目录中的tsconfig.json文件中配置path
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"module": "amd",
"target": "ES6",
"baseUrl": ".",
"paths":{
"@/*": ["src/*"]
} },
"exclude": [
"node_modules"
],
"include": [
"./src/**/*"
]
}
这样配置还有一个问题,任然无法通过文件夹名字识别下面的index.js ,需要的时候直接写全路径
错的
对的
参考https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010
以及https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string
IDE vscode识别webpack中alias配置路径的更多相关文章
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- webpack中babel配置 --- runtime-transform和babel-pollfill
webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...
- Webpack中SplitChunksPlugin 配置参数详解
代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 Spl ...
- webpack中alias别名配置
resolve:{ alias:{ bootcss:__dirname + '/node_modules/.3.3.7@bootstrap/dist/css/bootstrap.min.css' } ...
- webpack中代理配置(proxyTable)
注:用axios请求 1,下载axios npm i axios --save 2,在config文件下的index.js中配置代理地址 参考:https://vuejs-templates.gith ...
- 小技巧:webpack中@的配置和用法
好家伙, 当我们要各种两个文件去引用别的文件时,一般这么写 import msg from '../../msg.js' 那么如果文件藏得很深,'../'会变得很多,不美观,也不直观 所以我们又又又可 ...
- webpack中字体配置,可以引入bootstrap
{test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...
- webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板
在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值. 并配置webpack打包文件配置路径: 配置webpack打包文件路径,及非入口 chunk文件: ...
- vsCode与Hubilder中自定义代码块
平常测试vue的一些属性时总要新增代码,引入文件,麻烦,顾自定义代码块来实现快速新增测试 一.打开设置 1.1 vsCode设置 点击后选择代码块所属的文件类型,比如在html中则选择html类型配置 ...
随机推荐
- 数据库_mysql多表操作
多表操作 实际开发中,一个项目通常需要很多张表才能完成.例如:一个商城项目就需要分类表(category).商品表(products).订单表(orders)等多张表.且这些表的数据之间 ...
- C# 等待框
今天发现dev控件自带了等待框,调用方便,而且不会阻塞主线程. 拉一个窗体,界面上放两个按钮,显示等待框,隐藏. <Window x:Class="WaitDialogTest.Mai ...
- 二十一、Node.js-EJS 模块引擎
初识 EJS 模块引擎 我们学的 EJS 是后台模板,可以把我们数据库和文件读取的数据显示到 Html 页面上面.它是一个第三方模块,需要通过 npm 安装https://www.npmjs.com/ ...
- 最后一个 last-of-type
last-of-type这个比较好点,有时候:last-child 不起作用
- linux性能评估与分析工具---CPU篇
一. uptime root@calm:~# uptime :: up days, :, user, load average: 0.04, 0.09, 0.04 这里主要关注load average ...
- linux设置ip别名
修改文件 # vi /etc/hosts 添加地址和别名 192.168.222.126 s1 ##前面是机器ip,后面是别名 测试 [root@bogon /]# ping s1 PING s1 ( ...
- 【关于selenium自动化中,Webdriver的原理以及工作流程】
原文地址:https://www.cnblogs.com/imyalost/p/7242747.html#4109245 作者:老 张 1.关于Webdriver 设计模式:按照Server-Clie ...
- linux I/O函数使用
一.lseek lseek函数的作用是用来重新定位文件读写的位移. 头文件以及函数声明 #include <sys/types.h> #include <unistd.h> o ...
- 在Mondrian Virtual OLAP Cube中观察星座模型多事实表度量值的聚合
这样设置的Schema文件会怎么样呢?用Saiku预览一下. 如果这时候想同时引用两个项目进行计算就会出问题了.那么这种情况怎么解决? 参考网上一段实现思路 <VirtualCube name= ...
- 安装mysqlclient, 链接mysql失败,提示“Library not loaded: @rpath/libmysqlclient.21.dylib”
问题: >>> import MySQLdb Traceback (most recent call last): File "<stdin>", l ...