开发微信小程序自定义SDK,可在微信小程序,uniapp 中使用
·
步骤一:
下载微信模板
微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html
模板链接:https://github.com/wechat-miniprogram/miniprogram-custom-component
步骤二:
删除多余的文件,保留index,utlis这两个
删除tools -> config entry 中的 lib 字段

删除 config copy 这两个字段,保留 copy 空数组

步骤三:
编写相关功能方法,并导出

步骤四:
下载相关依赖 npm install
打包:npm run build
如果打包报--fix 错误
使用 npx eslint src/index.js --fix
打包完成后,就可以得到一个供外部使用的sdk文件了

供unaipp 使用,需要更改打包配置
tools =>config 修改如下

步骤五:
代码混淆
webpack-obfuscator
terser-webpack-plugin

config配置 代码
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const isDev = process.argv.indexOf('--develop') >= 0;
const isWatch = process.argv.indexOf('--watch') >= 0;
const demoSrc = path.resolve(__dirname, './demo');
const demoDist = path.resolve(__dirname, '../miniprogram_dev');
const src = path.resolve(__dirname, '../src');
const dev = path.join(demoDist, 'components');
const dist = path.resolve(__dirname, '../miniprogram_dist');
const Obfuscator = require('webpack-obfuscator');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: ['index'],
isDev,
isWatch,
srcPath: src, // 源目录
distPath: isDev ? dev : dist, // 目标目录
demoSrc, // demo 源目录
demoDist, // demo 目标目录
wxss: {
less: false, // 使用 less 来编写 wxss
sourcemap: false, // 生成 less sourcemap
},
js: {
webpack: true, // 使用 webpack 来构建 js
},
webpack: {
mode: 'production',
// output: {
// filename: '[name].js',
// libraryTarget: 'commonjs2',
// }, // 小程序output
output: {
filename: '[name].js',
path: isDev ? dev : dist,
library: {
type: 'module' // 这里改成 ESModule 输出
},
chunkFormat: 'module', // 推荐
}, // uniapp output
experiments: {
outputModule: true, // 必须开启支持ESModule输出
}, // uniapp 必须开启,小程序不需要
target: 'web', // 小程序版本 node uniapp web
externals: [nodeExternals()], // 忽略 node_modules
module: {
rules: [{
test: /\.js$/i,
use: [{
loader: 'thread-loader',
}, {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
// {
// loader: 'eslint-loader',
// }
],
exclude: /node_modules/
}, {
test: /\.ts$/,
exclude: /node_modules/,
use: [{
loader: 'thread-loader',
}, {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}, {
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
happyPackMode: true,
},
},
// {
// loader: 'eslint-loader',
// }
],
}],
},
resolve: {
modules: [src, 'node_modules'],
extensions: ['.ts', '.js', '.json'],
},
plugins: [
new webpack.DefinePlugin({}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new Obfuscator({
// 混淆选项
compact: true, // 开启压缩
controlFlowFlattening: false, // 开启控制流平铺
// 更多选项...
}),
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
// 压缩选项
reduce_vars: false, // 关闭变量名优化
},
mangle: true, // 开启变量名混淆
// 更多Terser选项...
},
}),
],
},
devtool: 'source-map', // 生成 js sourcemap
performance: {
hints: 'warning',
assetFilter: assetFilename => assetFilename.endsWith('.js')
}
},
copy: [], // 将会复制到目标目录
};
更多推荐
所有评论(0)