Create ES6 build without inlined helpers for async-await, iterators, rest-spread etc

[SpadarShut]

Currently every hook's code contains transpiled helpers like __awaiter, __generator, __assign, __rest, __read and others, which can amout to more code than hook itself.

It would be great to not include them by default or have another build target as browser support for async-await, iterators, rest-spread etc in browsers which support es6 imports is very good nowadays.

[crazylxr]

Can you provide PR to help solve this problem？

[SpadarShut]

I've tried to investigate this but am stuck at running the project locally. Here's what I see in console after running pnpm run init:

Scope: 2 of 3 workspace projects
packages/hooks build$ gulp && webpack-cli
│ [09:18:36] Local modules not found in ~/projects/ahooks/packages/hooks
│ [09:18:36] Try running: npm install
└─ Failed in 1.2s
/Users/pavelshut/projects/ahooks/packages/hooks:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  ahooks@3.7.1 build: `gulp && webpack-cli`
Exit status 1
 WARN   Local package.json exists, but node_modules missing, did you mean to install?
 ELIFECYCLE  Command failed with exit code 1.
 WARN   Local package.json exists, but node_modules missing, did you mean to install?
 ELIFECYCLE  Command failed with exit code 1.
 WARN   Local package.json exists, but node_modules missing, did you mean to install?

Tried running pnpm install in the root dir and in packages/hooks, it didn't help.

@crazylxr Can you help with overcoming this obstacle?

[miracles1919]

@SpadarShut The problem may be the version of pnpm, please try with the pnpm@7.1.9

[SpadarShut]

@miracles1919 With pnpm 7.1.9 I get another error:

Scope: 2 of 3 workspace projects
packages/hooks build$ gulp && webpack-cli
│ [21:36:23] Using gulpfile ~/projects/ahooks/packages/hooks/gulpfile.js
│ [21:36:23] Starting 'default'...
│ [21:36:23] Starting 'clean'...
│ [21:36:23] Finished 'clean' after 14 ms
│ [21:36:23] Starting 'cjs'...
│ [21:36:27] Finished 'cjs' after 4.53 s
│ [21:36:27] Starting 'es'...
│ [21:36:29] Finished 'es' after 1.25 s
│ [21:36:29] Starting 'declaration'...
│ [21:36:29] Finished 'declaration' after 867 ms
│ [21:36:29] Starting 'copyReadme'...
│ [21:36:29] Finished 'copyReadme' after 1.3 ms
│ [21:36:29] Starting 'metadata'...
│ [21:36:30] Finished 'metadata' after 80 ms
│ [21:36:30] Finished 'default' after 6.74 s
│ node:internal/crypto/hash:71
│   this[kHandle] = new _Hash(algorithm, xofLen);
│                   ^
│ Error: error:0308010C:digital envelope routines::unsupported
│     at new Hash (node:internal/crypto/hash:71:19)
│     at Object.createHash (node:crypto:133:10)
│     at module.exports (/Users/pavelshut/projects/ahooks/node_modules/.pnpm/webpack@4.46.0_webpack-
│     at NormalModule._initBuildHash (/Users/pavelshut/projects/ahooks/node_modules/.pnpm/webpack@4.
│     at handleParseError (/Users/pavelshut/projects/ahooks/node_modules/.pnpm/webpack@4.46.0_webpac
│     at /Users/pavelshut/projects/ahooks/node_modules/.pnpm/webpack@4.46.0_webpack-cli@3.3.12/node_
│     at /Users/pavelshut/projects/ahooks/node_modules/.pnpm/webpack@4.46.0_webpack-cli@3.3.12/node_
│     at /Users/pavelshut/projects/ahooks/node_modules/.pnpm/loader-runner@2.4.0/node_modules/loader
│     at iterateNormalLoaders (/Users/pavelshut/projects/ahooks/node_modules/.pnpm/loader-runner@2.4
│     at Array.<anonymous> (/Users/pavelshut/projects/ahooks/node_modules/.pnpm/loader-runner@2.4.0/
│     at Storage.finished (/Users/pavelshut/projects/ahooks/node_modules/.pnpm/enhanced-resolve@4.5.
│     at /Users/pavelshut/projects/ahooks/node_modules/.pnpm/enhanced-resolve@4.5.0/node_modules/enh
│     at /Users/pavelshut/projects/ahooks/node_modules/.pnpm/graceful-fs@4.2.10/node_modules/gracefu
│     at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) 
│   opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
│   library: 'digital envelope routines',
│   reason: 'unsupported',
│   code: 'ERR_OSSL_EVP_UNSUPPORTED'
│ }
│ Node.js v18.9.0
└─ Failed in 14.4s
/Users/pavelshut/projects/ahooks/packages/hooks:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  ahooks@3.7.1 build: `gulp && webpack-cli`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

[miracles1919]

@SpadarShut nodejs/node#40455

You could try switching to v16, or set NODE_OPTIONS=--openssl-legacy-provider

Reference webpack/webpack#14532

[crazylxr]

@SpadarShut nodejs/node#40455

You could try switching to v16, or set NODE_OPTIONS=--openssl-legacy-provider

Reference webpack/webpack#14532

Did you solve your problem? @SpadarShut

[SpadarShut]

I found how to fix the problem.

Howewer, I have some questions:

• what should be the browserslist value of supported browsers for the ESM build? Is defaults ok?
• Can we skip transpiling async-await?

[miracles1919]

@SpadarShut I've optimized the build, and I think defaults browserslist is ok, you can configure targets in @babel/preset-env to improve compatibility

[SpadarShut]

Have you considered changing target in tsconfig from es5 to esnext? It's TypeScript who is injecting all the helpers, so the transfrom runtime plugin will not be needed, AFAIU.

[miracles1919]

Yeah, I have changed to es6

[SpadarShut]

Esnext should be better here because this way TS compiler will do minimal changes and babel will do all the needed transforms according to browserslist config.

[miracles1919]

OK

[miracles1919]

I tried esnext but found that the CI failed.

Webpack 4 doesn't supoort optional chaining (?.), it needs babel plugin
ref: webpack/webpack#10227

So when we upgrade webpack5, we may be able to use esnext

[liuyib]

related:

• @3.7.2版本，useRequest的defaultParams失效，导致默认参数无法传入接口，引发线上报错 #1939
• Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function #2027

mark~