文件结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|-- config | |-- webpack.base.js | |-- webpack.development.js | `-- webpack.production.js |-- dist | |-- mars_minigame_sdk.js | `-- mars_minigame_sdk.min.js |-- node_modules |-- package-lock.json |-- package.json |-- src | |-- index.js # SDK入口 | |-- lib | | `-- util.js # 工具函数 | `-- sdk # 各渠道SDK | |-- qq.js | `-- wechat.js `-- webpack.config.js |
安装依赖
1 2 |
npm install -g webpack webpack-cli npm install --save-dev webpack webpack-cli webpack-merge uglifyjs-webpack-plugin babel-loader |
配置webpack
configwebpack.base.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const path = require('path') module.exports = { entry: { 'mars_minigame_sdk': '@/index.js' }, output: { path: path.resolve(__dirname, '../dist'), filename: '[name].min.js', library: 'mars_mg_sdk', libraryTarget: "umd" }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }, resolve: { alias: { '@': path.resolve('src') } } } |
configwebpack.development.js
1 2 3 4 5 6 7 |
const merge = require("webpack-merge"); module.exports = { devtool: 'source-map', output: { filename: '[name].js', } } |
configwebpack.production.js
1 2 3 4 5 6 |
const merge = require("webpack-merge"); module.exports = { output: { filename: '[name].min.js', } } |
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 |
const merge = require('webpack-merge'); const baseConfig = require('./config/webpack.base'); const developmentConfig = require('./config/webpack.development'); const productionConfig = require('./config/webpack.production'); module.exports = mode => { if (mode === "production") { return merge(baseConfig, productionConfig, { mode }); } return merge(baseConfig, developmentConfig, { mode }); } |
package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
{ "name": "mars_mg_sdk", "version": "1.0.0", "description": "火星救援小游戏SDK", "private": true, "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "npm run dev", "dev": "webpack --watch --env development", "build": "webpack --env production", "server": "webpack-dev-server --open --env development" }, "repository": { "type": "git", "url": "ssh://git@gitlab.mars.com/lcpd/mars_mg_sdk.git" }, "keywords": [ "火星救援", "小游戏", "SDK" ], "author": "Mars Developer", "license": "MIT", "dependencies": {}, "devDependencies": { "@babel/core": "^7.5.4", "babel-loader": "^8.0.6", "uglifyjs-webpack-plugin": "^2.1.3", "webpack": "^4.35.3", "webpack-cli": "^3.3.5", "webpack-dev-server": "^3.7.2", "webpack-merge": "^4.2.1" } } |
业务代码
index.js
1 2 3 4 5 6 7 8 9 10 11 |
const qqSdk = require('./sdk/qq'); const wechatSdk = require('./sdk/wechat'); const util = require('./lib/util'); window.apiHost = 'https://api.mp.mars.com/'; module.exports = { init: function (e) {}, login: function (e) {}, pay: function (e) {} } |
sdkwechat.js
1 2 3 4 5 6 7 |
const util = require('../lib/util'); module.exports = { init: function (e) {}, login: function (e) {}, pay: function (e) {} } |
打包
打包开发环境文件，即打包成mars_minigame_sdk.js。启动命令参数加了--watch，文件改动时会自动打包。
1
|
npm run dev
|
打包生产环境文件，即mars_minigame_sdk.min.js
1
|
npm run build
|