es6 default

[taoqf]

使用webpack打包，配置babel-loader，babelrc配置如下

{
	"presets": [
		"env"
	],
	"plugins": [
		"transform-runtime"
	]
}

打包后的文件中使用bscroll的地方提示：Uncaught (in promise) TypeError: BScroll is not a constructor。
调试跟踪到代码

var _betterScroll = __webpack_require__(277);

var BScroll = _interopRequireWildcard(_betterScroll);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

处发现_betterScroll没有__esModule属性，所以BScroll实际上变成了{default:BScroll}。导致下面无法实际化
因为其它引用库的原因，我是没有办法使用 module:false的babel配置的。
我尝试了各种办法，但在不修改源码的基础上始终没有一个圆满的结果。
这是在我用

import * as BScroll from 'better-scroll';

的情况。而如果我换成

import BScroll from 'better-scroll';

写法的话，typescript会转换为amd格式的js代码

const better_scroll_1 = require("better-scroll");
const myscroll = new better_scroll_1.default();

引用的话，webpack打包是没有问题，但问题在于我开发的时候用的是amd方式加载的bscroll，在这种情况下使用就有问题了。
所以我做了一点修改，如果 @ustbhuangyi 认为有更好的办法，请指点。

[ustbhuangyi]

v1.4.2 支持了 esm，你现在默认引入的应该是 bscroll.esm.js

[ustbhuangyi]

正常import就可以

[taoqf]

我大概看了下bscroll.esm.js，似乎意思是说我用webpack的时候用它，但amd还用bscroll.js对吧?

[taoqf]

我之前错了。并没有OK，问题依旧

[taoqf]

事实上,bscroll.esm.js和bscroll.js在使用webpack打包的情况下，结果是一样的。

[taoqf]

bscroll.esm.js在

var _betterScroll = __webpack_require__(277);

var BScroll = _interopRequireWildcard(_betterScroll);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

处_betterScroll为

{
    __esModule: true,
    default: BScroll
}

所以得到的BScroll是

{
    default: {
        __esModule: true,
        default: BScroll
    }
}

[ustbhuangyi]

你的 webpack 什么版本，我们所有项目都是用 webpack 构建的，为啥没有你这个问题？

[ustbhuangyi]

没有这个配置

[ustbhuangyi]

webpack 2+ 版本都没有这个问题

[ustbhuangyi]

我的构建方式和 Vue 是一样的，生成的代码结构也是一样，并不是 Rollup 的问题

[taoqf]

要么amd方式不行，要么es和commonjs方式不行，只能选其一

[taoqf]

而我的ts代码是一份，只是在开发的时候编译为umd的，使用amd加载器加载，部署的时候编译为esnext的并使用webpack+babel-loader打包

[ustbhuangyi]

开发阶段为啥要编译成 umd？�
我刚才看了一下一个webpack 构建的项目并依赖 better-scroll 编译后的代码，也并没有你说的问题。

[ustbhuangyi]

或者你建一个项目依赖一下 Vue，看看有没有类似的问题

[taoqf]

开发阶段为啥要编译成 umd？�
我刚才看了一下一个依赖 webpack 的项目编译后的代码，也并没有你说的问题。

方便并且快。

[taoqf]

或者你建一个项目依赖一下 Vue，看看有没有类似的问题

我确定是跟vue没关系的。就是rollup和ts的问题，上次发过这个问题讨论的链接了。
能不能合并一下我上次提交的pr呢，它是解决这个问题一个比较另类的方法了，如果老板没有更好办法的话。

[taoqf]

副使用也不很大，就是在 BScroll 上加一个 default 属性而已。

[ustbhuangyi]

如果你不用 TS，还有这个问题吗？

[taoqf]

我对比过ts生成的umd和rollup生成的umd格式，就是差这个

Object.defineProperty(exports, "__esModule", { value: true });

而babel会根据这个判断

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

转换代码

[ustbhuangyi]

你先按我说的，项目中引入一下 Vue，试试能不能正常引用，因为 Vue 也是对 TS 做了支持，也是 Rollup 打包，输出的也是 esm。

[taoqf]

试了，不行

[ustbhuangyi]

�那你先 fork 一份发布到你们内部的私服上吧，等待 TS 或者 Rollup 修复这个问题。

[linxiaowu66]

@taoqf 你有试过这种写法吗？

import Bscroll = require('better-scroll')

我也是用的TS，这种写法在我这边没有问题

[taoqf]

多谢，刚看到这些回复。
最近没搞这一块了，暂时我那里能用了，并且我还修复过其它bug（在我的私有库），TypeScript2.7已经对这问题有了改进，应该已经不存在了。

[channg]

同样遇到这样的问题