步骤一:

下载微信模板

微信开发文档: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: [], // 将会复制到目标目录
};

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐