使用webpack打包前端sdk 可以通用复用

文件结构

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

image

打包生产环境文件,即mars_minigame_sdk.min.js

1
npm run build
This entry was posted in 编程 by .

发表评论

电子邮件地址不会被公开。 必填项已用*标注