跳到主要内容

打包

因 everpay-js 引用的库中,使用很多 nodeJS 内置模块,例如 buffer, stream, crypto, path 等,所以我们需要配置 vite.config.jswebpack.config.js 来支持使用 nodeJS 内置模块。

vite

打开 vite.config.js 进行配置:

// yarn add buffer
// yarn add --dev @esbuild-plugins/node-globals-polyfill
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
const processEnvValues = {
'process.env': Object.entries(env).reduce((prev, [key, val]) => {
return {
...prev,
[key]: val
}
}, {})
}
return {
plugins: [vue()],
define: Object.assign(processEnvValues, { global: {} }),
resolve: {
alias: {
util: 'rollup-plugin-node-polyfills/polyfills/util',
buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
}
},
optimizeDeps: {
esbuildOptions: {
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true
}),
NodeModulesPolyfillPlugin()
]
}
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill()
]
}
}
}
})

webpack 5.x

[email protected]

打开 vue.config.js 进行配置:

// yarn add buffer
// yarn add stream-browserify
const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
stream: 'stream-browserify'
},
fallback: {
buffer: require.resolve('buffer/'),
stream: require.resolve('stream-browserify')
}
},
plugins: [
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer']
})
]
}
})

后续若出现 cryptonot defined 情况,可使用相同方法引入。参考 https://github.com/Bundlr-Network/arbundles/blob/master/webpack.config.js

create-react-app

通过 yarn eject命令,目录多出 config 文件夹,打开 webpack.config.js,找到 reslove 添加: fallbackbuffer:

// yarn add buffer
{
reslove:{
// ...
alias:{
stream: 'stream-browserify'
},
fallback: {
buffer: require.resolve('buffer/'),
stream: require.resolve('stream-browserify')
},
},
//...
plugins: [
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer']
})
]
}

后续若出现 cryptonot defined 情况,可使用相同方法引入。参考 https://github.com/Bundlr-Network/arbundles/blob/master/webpack.config.js

[email protected]

没问题,打包正常。