正文

Typescript 和 webpack 别名

 2023-03-13  40

关键词：

【中文标题】Typescript 和 webpack 别名【英文标题】：Typescript and webpack alias 【发布时间】：2018-01-31 01:58:36 【问题描述】：

我需要为我的代码创建一个 Hammer 的别名。我在 tsconfig 中添加了路径，如下所示：


  "compilerOptions": 
    "declaration": true,
    "noImplicitAny": false  ,
    "noEmitOnError": true,
    "noUnusedLocals": false ,
    "noUnusedParameters": false ,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "ES5",
    "outDir": "./lib",
    "lib": ["ES5", "ES2015.Promise", "DOM", "ES2015.Collection", "es2016"],
    "jsx": "react",
    "types": [],
    "baseUrl": ".",
    "paths": 
      "Hammer": ["hammerjs/hammer.js"]
    
  ,
  "include": ["typings/index.d.ts","src/*"]

但是在 geo.js 中我仍然收到错误，我有“require(Hammer)”。我错过了什么？

ERROR in ./~/geojs/geo.js
Module not found: Error: Can't resolve 'Hammer' in '/home/chaudhary/tools/jupyterlab/mydev/share/jupyter/lab/staging/node_modules/geojs'
 @ ./~/geojs/geo.js 3:27-44
 @ ./~/@jupyterlab/geojson-extension/lib/index.js
 @ ./build/index.out.js

【问题讨论】：

与***.com/questions/40443806/…相关你还需要为 webpack 配置路径：github.com/s-panferov/… @ThomasDevries 谢谢。我正在使用 ts-loader (github.com/TypeStrong/ts-loader)，你可以在上面的配置中看到路径。我找到了答案，因为在我的情况下，调用程序正在创建自己的 webpack 配置，现在，我必须将 Hammer 嵌入到 GeoJS 中（在 webpack 配置中将 Hammer 作为外部删除）。 【参考方案1】：

我找到了答案，因为每次调用 Jupyter 实验室构建时，调用程序 (JupyterLab) 都会创建一个新的 webpack 配置。现在，我不得不将 Hammer 嵌入到 GeoJS（在 webpack 配置中将 Hammer 作为外部组件移除）。

【讨论】：

typescript项目配置路径别名（路径映射）(代码片段)

...们也可以通过配置webpack的config来指定路径别名，但是在typescript+webpack项目中我们该怎么配置别名呢？参考文档https://www.tslang.cn/docs/handbook/module-resolution.html 可知typescript是通过tsconfig.js 查看详情

使用 Jest 和 Webpack 别名进行测试

】使用Jest和Webpack别名进行测试【英文标题】：TestingwithJestandWebpackaliases【发布时间】：2017-07-2613:50:25【问题描述】：我希望能够在使用jest时使用webpack别名来解析导入，最好是引用webpack.aliases以避免重复。开玩笑的："jest":"moduleP... 查看详情

通过 webpack 2 和 typescript 使用 globalize

】通过webpack2和typescript使用globalize【英文标题】：Usingglobalizewithwebpack2andtypescript【发布时间】：2017-07-0405:38:00【问题描述】：我正在尝试在TypeScript项目中使用Globalizelibrary和webpack2。typescript/Webpack2设置已经可以工作，但是，在导... 查看详情

使用源映射和 webpack 调试 typescript

】使用源映射和webpack调试typescript【英文标题】：Debuggingtypescriptwithsourcemapsandwebpack【发布时间】：2017-08-1010:13:42【问题描述】：我有一个用Typescript编写的项目，我希望能够对其进行调试（在ChromeDevTools或Intellij中）。起初我看到... 查看详情

scss @import 中的 Webpack 和别名

使用 webpack 和 typescript 摇树

】使用webpack和typescript摇树【英文标题】：Treeshakingusingwebpackandtypescript【发布时间】：2016-11-1721:26:44【问题描述】：我正在尝试减轻我的angular2应用程序的重量。我使用typescript(1.8.10)和webpack(1.13)作为模块打包器。我已经缩小了我... 查看详情

使用 webpack、threejs 示例和 typescript？

】使用webpack、threejs示例和typescript？【英文标题】：Usingwebpack,threejsexamples,andtypescript?【发布时间】：2016-06-2808:10:48【问题描述】：我在让threejs的示例（如EffectComposer或Detector）中的东西与webpack和typescript一起工作时遇到了很多麻... 查看详情

vue不是构造函数错误，使用Typescript和webpack

】vue不是构造函数错误，使用Typescript和webpack【英文标题】：Vueisnotaconstructorerror,usingTypescript&webpack【发布时间】：2018-05-0115:36:39【问题描述】：我正在使用Typescript和Webpack。我的代码如下。我在chrome中运行它，它给出了错误：... 查看详情

使用 React、Typescript 和 Webpack 显示静态图像

】使用React、Typescript和Webpack显示静态图像【英文标题】：DisplayingastaticimageusingReact,TypescriptandWebpack【发布时间】：2017-11-0221:01:15【问题描述】：我正在尝试使用webpack和webpack-dev-server在React组件中显示图像作为项目的一部分。到目... 查看详情

使用 jasmine、chutzpah 和 webpack 进行 Typescript 单元测试

】使用jasmine、chutzpah和webpack进行Typescript单元测试【英文标题】：Typescriptunittestingwithjasmine,chutzpahandwebpack【发布时间】：2017-06-2102:10:58【问题描述】：我正在尝试使用Angular2、Webpack和Chutzpah对typescript进行单元测试，但在为Webpack捆... 查看详情

带有 React、TypeScript 和 Webpack 的空白页面

】带有React、TypeScript和Webpack的空白页面【英文标题】：BlankpagewithReact,TypeScript,andWebpack【发布时间】：2022-01-2306:51:03【问题描述】：我使用create-react-app创建了一个React应用程序，并向其中添加了TypeScript。我添加了Webpack，因为我... 查看详情

Webpack：“通常”和作为原始字符串导入 TypeScript 模块

】Webpack：“通常”和作为原始字符串导入TypeScript模块【英文标题】：Webpack:importTypeScriptmoduleboth"normally"andasrawstring【发布时间】：2017-07-2616:16:37【问题描述】：使用webpack^v2.2.1，除了“正常”导入相同的模块之外，我还想... 查看详情

使用 webpack、gulp 和 typescript 加载 jQuery 插件

】使用webpack、gulp和typescript加载jQuery插件【英文标题】：LoadingjQuerypluginswithwebpack,gulp,andtypescript[duplicate]【发布时间】：2017-10-0218:29:49【问题描述】：我似乎无法找到正确的方法来加载相互依赖的第三方库。我将TypeScript和Gulp与Web... 查看详情

使用 Typescript 和 Webpack 管理依赖项的 AngularJS

】使用Typescript和Webpack管理依赖项的AngularJS【英文标题】：AngularJSwithTypescriptandWebpackmanagingdependencies【发布时间】：2019-01-3009:56:37【问题描述】：我的团队的任务是迁移AngularJS应用程序以使用Webpack作为构建系统并结合TypeScript。这... 查看详情

如何在 Typescript 中使用 Webpack 'require' 和 'require.ensure'

】如何在Typescript中使用Webpack\\\'require\\\'和\\\'require.ensure\\\'【英文标题】：HowtouseWebpacks\'require\'and\'require.ensure\'inTypesScript如何在Typescript中使用Webpack\'require\'和\'require.ensure\'【发布时间】：2017-05-2715:51:15【问题描述】：我正在尝... 查看详情

Typescript、Airbnb 和 eslint 导入/无外部依赖项（带别名）

】Typescript、Airbnb和eslint导入/无外部依赖项（带别名）【英文标题】：Typescript,Airbnbandeslintimport/no-extraneous-dependencieswithalias【发布时间】：2021-06-2016:35:27【问题描述】：好的，我正在尝试使用Airbnblinting规则设置打字稿。但我无法... 查看详情

带有 Webpack 和 Typescript 的 JQuery 插件（数据表）

】带有Webpack和Typescript的JQuery插件（数据表）【英文标题】：JQueryPlugin(datatables)withWebpackandTypescript【发布时间】：2016-08-1522:41:55【问题描述】：我正在尝试将数据表JQuery插件与webpack和typescript一起使用。我已经启动了JQuery并与打... 查看详情

使用 Webpack 和 Typescript 将模块公开给全局 Window 对象

】使用Webpack和Typescript将模块公开给全局Window对象【英文标题】：ExposemoduletoglobalWindowobjectwithWebpackandTypescript【发布时间】：2017-04-1614:58:30【问题描述】：我正在使用webpack来处理和捆绑我的TypeScript模块，但我需要一些模块/块可... 查看详情