preact-cli/babel/typescript -让Symbol.iterator和[...spread]正常工作

Question

在我的代码中，我有一个名为range的函数，它可以生成范围。具体实现如下：

export const range = (min: number, max: number) => {
    // ...

    return {
        // ...
        *[Symbol.iterator]() {
            let n = min

            while (n <= max) yield n++
        }
    }
}

正如您所期望的那样，Array.from(range(1, 5))提供了[1, 2, 3, 4, 5]。

// console.log(() => [...range(1, 5)])
ƒ () { return [].concat(range(1, 5)) }

.tsconfig与我以前使用的完全相同，以ESNext为目标，将downlevelIteration更改为true或false没有任何作用，因此我相当有把握地认为问题不存在。

package.json

"browserslist": "last 3 chrome versions, last 3 firefox versions"

.babelrc

{ "presets": [ [ "preact-cli/babel", { "modules": "commonjs" } ] ] }

下面是相关的部分：

webpack(config, env, helpers, options) {
    // ...

    config.module.rules = config.module.rules.map(rule => {
        if (rule.loader === 'babel-loader') {
            const use = [
                {
                    loader: 'babel-loader',
                    options: rule.options
                },
                {
                    loader: 'ts-loader'
                }
            ]

            return {
                ...rule,
                loader: undefined,
                options: undefined,
                use,
            }
        }
        // ...    
    })
    // ...
}

我该如何着手解决这个问题呢？

Answer 1

我将在评论中重复@PeterLehnhardt提供的解决方案，以便每个人都能看到: Create preact.config.js

export default {
  webpack(config, env, helpers, options) {
    const { rule } = helpers.getLoadersByName(config, 'babel-loader')[0];
    const babelConfig = rule.options;

    babelConfig.assumptions = {
      iterableIsArray: false, 
    }
  }
}

Answer 2

最后，通过简单地完全删除babel-loader修复了这个问题。我用以下代码替换了preact.config.js的相关部分：

if (rule.loader === 'babel-loader') {
    return { loader: 'ts-loader' }
}

不过，我仍然很好奇如何在不完全移除Babel的情况下解决这个问题。