[NervJS/taro]用webpack5编译时可以使用node的原生模块crypto和zlib

你说的编译时指的打包编译过程，还是希望将 crypto 打包到运行时的包里？

应该开发和生产环境都需要吧。因为我们用到第三方数据接口，接口数据是经node原生模块zlib和crypto压缩并加密的。引入taro后，需要进行解压解密操作。之前用的taro 3.4.x + webpack4，开发和生产运行都能正常使用。

你直接提供一个 DEMO 吧，可以针对你的 demo 给一些配置的建议

大概如下，只要能正常使用下面方法即可（实际可能还使用到aes和md5算法）

import crypto from 'crypto';
import zlib from 'zlib';
import { Buffer } from 'buffer';

function decrypt(encrypted: string) {
    return zlib.gunzipSync(Buffer.from(encrypted, 'base64')).toString('utf-8');
}

function encrypt(text: string) {
    const o = Buffer.from(text).toString('base64');
    const m = crypto.createHmac('sha256', 'key');
    const h = m.update(o);
    return h.digest('base64');
}

如果不用webpack5官方配置，有类似crypto not found这样的提示，如果按webpack5官网方法配置，会提示util not found或process not found等错误

webpackChain(chain){
      chain.merge({
        resolve: {
          fallback: {
            zlib: require.resolve('browserify-zlib'),
            stream: require.resolve('stream-browserify'),
            util: require.resolve('util'),
            crypto: require.resolve('crypto-browserify'),
            buffer: require.resolve('buffer'),
            assert: require.resolve('assert'),
            process: require.resolve('process/browser')
          },
        },
      })
    }

没有人使用这些组件的吗？看来只能继续使用webpack4了

webpack-chain 暂时不支持 webpack5 新增的配置项 fallback，因此上面的配置是不可行的。

可以试一下这个：

const resolve = chain.resolve
resolve.set('fallback', {...})

额，好像也不行，因为最后 chain.toConfig() 的时候会调用到 resolve.toConfig()，而resolve.toConfig() 只返回支持的配置项。目前看没有很好的办法。

没有别的办法，就只能降到webpack4了

我先这么解决的..

webpackChain(chain){
   chain
    .plugin('ProvidePlugin')
    .use(require.resolve('webpack/lib/ProvidePlugin'), [{ 
      Buffer: ['buffer', 'Buffer'], 
      process: ['process/browser.js'] 
    }]);
}

See #13656

到现在还没支持fallback？我在用react-markdown 这个包也是 遇到好多问题

open for webpack 5 fallback 支持诉求.

目前 webpack-chain 稳定版本暂不支持 webpack5 的新特性，虽然它的PR有针对 webpack5 的支持，但是好像 webpack-chain 仓库管理员集体“失联”，PR 一直被搁置。

https://github.com/neutrinojs/webpack-chain/pull/297#issuecomment-1512346603

我使用一些配置似乎是可以的，可以在 browser 环境下使用 crypto.

参考 https://juejin.cn/post/7095257275765358606 还需要 stream-browserify -> stream

...
    webpackChain(chain) {
      chain.plugin('unplugin-vue-components').use(Components({
        resolvers: [NutUIResolver({taro: true})]
      }))
      // NOT WORKING
      // chain.resolve.fallback = {
      //     crypto: require.resolve('crypto-browserify'),
      //     stream: require.resolve('stream-browserify'),
      // }
      // method1: WORKING
      chain.resolve.alias.set('crypto', require.resolve('crypto-browserify'))
      chain.resolve.alias.set('stream', require.resolve('stream-browserify'))
      // method2: WORKING
      // const resolve = chain.resolve
      // resolve.set('fallback', { 
      //   crypto: require.resolve('crypto-browserify'),
      //   stream: require.resolve('stream-browserify'),
      // })
    },
...