webpack使用ts-loader导出export default问题

简介: webpack使用ts-loader导出export default问题

index.ts


function foo(){}
export default foo

转译后变成了


export.default = foo;

外部引用的时候只能通过


import foo from "./index.js"
foo.default

看起来有奇怪


解决方式是在配置文件 webpack.config.js 中添加配置


'use strict';
module.exports = {
  // 省略其他配置
  output: {
    library: {
      name: 'libraryName',
      type: 'umd',
      // 不添加的话引用的时候需要 libraryName.default
      export: 'default',
    },
  },
  // 省略其他配置
};

问题来自

相关文章
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
669 1
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
JavaScript
webpack打包TS
webpack打包TS
232 60
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
1175 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
152 2
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
196 13
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化