Skip to content

Commit fbf306c

Browse files
iignatoviignatov
authored
refactor: dev environment fixes and improvements (#71)
* chore: do not lint JS files * fix: update Webpack config for local development * refactor: move optimization from Grunt to Webpack * chore: some refactoring of Webpack config * chore: remove unused Grunt task * fix: update Webpack dev config
1 parent 951f951 commit fbf306c

File tree

8 files changed

+247
-127
lines changed

8 files changed

+247
-127
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = {
66
extends: [
77
'plugin:@typescript-eslint/recommended'
88
],
9+
ignorePatterns: ['*.js'],
910
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
1011
parserOptions: {
1112
'ecmaVersion': 6,

‎Gruntfile.js

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,56 @@
1+
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
2+
const clone = require('lodash.clonedeep')
13
const webpackConfig = require('./webpack.config')
24

35
module.exports = function (grunt) {
46
grunt.loadNpmTasks('grunt-contrib-clean')
5-
grunt.loadNpmTasks('grunt-contrib-uglify')
67
grunt.loadNpmTasks('grunt-webpack')
78

89
grunt.initConfig({
910
clean: ['dist'],
10-
uglify: {
11-
my_target: {
12-
files: {
13-
'dist/leanplum.min.js': 'dist/leanplum.js',
14-
'dist/sw/sw.min.js': 'dist/sw/sw.js'
15-
}
16-
}
17-
},
18-
watch: {
19-
js: {
20-
files: [
21-
'lib/leanplum.js'
22-
],
23-
tasks: ['lint', 'compile']
24-
}
25-
},
2611
webpack: {
2712
options: {
28-
stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
13+
stats: (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') && {
14+
all: false,
15+
assets: true,
16+
chunks: false,
17+
entrypoints: false,
18+
errorDetails: false,
19+
errors: true,
20+
excludeAssets: [ /\.d\.ts$/ ],
21+
hash: false,
22+
logging: 'error',
23+
performance: false,
24+
warnings: false,
25+
}
2926
},
30-
dev: Object.assign({
31-
watch: true
32-
}, webpackConfig),
27+
dev: getWebpackDevConfig(webpackConfig),
3328
prod: webpackConfig
3429
}
3530
})
3631

37-
grunt.registerTask('compile', ['clean', 'webpack:prod'])
38-
grunt.registerTask('build', ['clean', 'webpack:prod', 'uglify'])
32+
grunt.registerTask('build', ['clean', 'webpack:prod'])
3933
grunt.registerTask('default', ['webpack:dev'])
4034
}
35+
36+
function getWebpackDevConfig(webpackConfig) {
37+
const config = clone(webpackConfig.find((x) => x.output.filename === 'leanplum.js'))
38+
39+
config.plugins = [new ForkTsCheckerWebpackPlugin({
40+
compilerOptions: {
41+
declaration: false,
42+
},
43+
silent: false,
44+
})]
45+
46+
const loader = config.module.rules.find((x) => x.loader === 'ts-loader')
47+
48+
loader.options = {
49+
compilerOptions: {
50+
declaration: false,
51+
},
52+
transpileOnly: true
53+
}
54+
55+
return Object.assign(config, { watch: true })
56+
}

‎dist/leanplum.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/sw/sw.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,19 @@
2323
"grunt": "^1.0.1",
2424
"grunt-contrib-clean": "^2.0.0",
2525
"grunt-contrib-jshint": "^1.1.0",
26-
"grunt-contrib-uglify": "^4.0.1",
2726
"grunt-webpack": "^3.0.0",
2827
"http-server": "^0.12.1",
2928
"jest": "^25.1.0",
3029
"jsdom": "^9.12.0",
30+
"lodash.clonedeep": "^4.5.0",
3131
"lodash.isequal": "^4.5.0",
32+
"lodash.merge": "^4.6.2",
3233
"mock-local-storage": "^1.0.2",
3334
"sinon": "^2.1.0",
3435
"ts-jest": "^25.2.0",
3536
"ts-loader": "^6.2.1",
3637
"typescript": "^3.7.2",
38+
"uglifyjs-webpack-plugin": "^2.2.0",
3739
"webpack": "^4.41.2"
3840
},
3941
"name": "leanplum-sdk",

‎src/test.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Leanplum WebSDK Demo</title>
8+
</head>
9+
10+
<body>
11+
<div id="app" style="display: none;">
12+
<button id="testButton">Test</button>
13+
<button id="stopButton">Stop</button>
14+
</div>
15+
16+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
17+
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
18+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leanplum.min.js"></script>
19+
20+
<script>
21+
// This value should be set to true only if you're developing on your server.
22+
var isDevelopmentMode = true;
23+
24+
// Sample variables. This can be any JSON object.
25+
var variables = {
26+
items: {
27+
color: 'red',
28+
size: 20,
29+
showBadges: true
30+
},
31+
showAds: true
32+
};
33+
34+
// Get your App ID and Keys from https://www.leanplum.com/dashboard?#/account/apps
35+
if (isDevelopmentMode) {
36+
Leanplum.setAppIdForDevelopmentMode(
37+
"app_1R68vJaFq0XfKjH7PO6wllqZONbbqT2RML5LgLelGaE",
38+
"dev_CjLbQGjQO748Gm6LY14rJPT3IrQeYwAljJcYZHaA5Mg"
39+
);
40+
} else {
41+
Leanplum.setAppIdForProductionMode(
42+
"app_1R68vJaFq0XfKjH7PO6wllqZONbbqT2RML5LgLelGaE",
43+
"prod_kiHEN9pOAbDGhPhKsrTHwZNniYMDd7nkZ7b5J7OLPQg"
44+
);
45+
}
46+
47+
Leanplum.addVariablesChangedHandler(onVariablesUpdate);
48+
49+
updateUI(variables);
50+
Leanplum.setVariables(variables);
51+
Leanplum.start(function(success) {
52+
var vars = Leanplum.getVariables();
53+
console.log('Success: ' + success);
54+
console.log('Variables', vars);
55+
console.log('Color', Leanplum.getVariable('items', 'color'));
56+
console.log('ShowBadges', Leanplum.getVariable('items', 'showBadges'));
57+
console.log('ShowAds', Leanplum.getVariable('showAds'));
58+
updateUI(vars);
59+
});
60+
61+
$('#stopButton').click(function() {
62+
Leanplum.removeVariablesChangedHandler(onVariablesUpdate);
63+
});
64+
65+
function onVariablesUpdate() {
66+
var vars = Leanplum.getVariables();
67+
console.log('Variables updated!', vars);
68+
updateUI(vars);
69+
}
70+
71+
function updateUI(variables) {
72+
$('#testButton').css({ backgroundColor: variables.items.color });
73+
$('#app').show();
74+
}
75+
76+
// Leanplum.setVariables({
77+
// StoreTitle: "Powerup Store",
78+
// Items: [
79+
// {
80+
// name: "Speed Boost",
81+
// price: 100
82+
// }, {
83+
// name: "Health Boost",
84+
// price: 150
85+
// }
86+
// ]
87+
// });
88+
89+
// var variables = Leanplum.getVariables();
90+
// //Gets a particular variable.
91+
// var title = Leanplum.getVariable('StoreTitle');
92+
// var speedBoost = Leanplum.getVariable('Items', 0);
93+
// var healthBoostName = Leanplum.getVariable('Items', 1, 'name');
94+
</script>
95+
96+
</body>
97+
98+
</html>

‎webpack.config.js

Lines changed: 68 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
const merge = require('lodash.merge')
12
const path = require('path')
23
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
4+
const UglifyJS = require('uglifyjs-webpack-plugin')
35

46
const libraryName = 'Leanplum'
57

@@ -38,46 +40,75 @@ class DtsBundlePlugin {
3840
}
3941
}
4042

41-
const buildFile = (options) => {
42-
const commonOptions = {
43-
devtool: 'inline-source-map',
44-
mode: 'production',
45-
resolve: {
46-
extensions: ['.js', '.ts']
47-
},
48-
module: {
49-
rules: [{
50-
test: /\.ts$/,
51-
include: [path.resolve(__dirname, './src')],
52-
loader: 'ts-loader'
53-
}]
43+
const optimization = {
44+
minimize: true,
45+
minimizer: [
46+
new UglifyJS({
47+
cache: true,
48+
parallel: true,
49+
uglifyOptions: {
50+
compress: {
51+
drop_console: true
52+
},
53+
ecma: 5,
54+
mangle: true,
55+
output: {
56+
beautify: false,
57+
comments: false,
58+
},
59+
warnings: false
5460
}
61+
})
62+
],
63+
noEmitOnErrors: true,
64+
sideEffects: true,
65+
usedExports: true
66+
}
67+
68+
const buildFile = (filename, options) => {
69+
const commonOptions = {
70+
devtool: 'inline-source-map',
71+
mode: 'production',
72+
output: {
73+
path: path.resolve(__dirname, './dist'),
74+
filename: filename
75+
},
76+
plugins: [
77+
new ForkTsCheckerWebpackPlugin({ silent: true }),
78+
],
79+
resolve: {
80+
extensions: ['.js', '.ts']
81+
},
82+
module: {
83+
rules: [{
84+
test: /\.ts$/,
85+
include: [path.resolve(__dirname, './src')],
86+
loader: 'ts-loader'
87+
}]
5588
}
89+
}
90+
91+
if (filename.includes('.min.')) {
92+
commonOptions.devtool = false
93+
commonOptions.optimization = optimization
94+
}
95+
96+
if (filename === 'leanplum.js') {
97+
commonOptions.plugins.push(new DtsBundlePlugin())
98+
}
5699

57-
return Object.assign({}, commonOptions, options)
100+
return merge({}, commonOptions, options)
58101
}
59102

60103
module.exports = [
61-
buildFile({
62-
entry: './src/bundles/leanplum.full.ts',
63-
output: {
64-
path: path.resolve(__dirname, './dist'),
65-
filename: 'leanplum.js',
66-
library: libraryName,
67-
libraryTarget: 'umd'
68-
},
69-
plugins: [
70-
new ForkTsCheckerWebpackPlugin(),
71-
new DtsBundlePlugin(),
72-
]
73-
}),
74-
buildFile({
75-
entry: './src/PushServiceWorker.ts',
76-
output: {
77-
path: path.resolve(__dirname, './dist'),
78-
filename: 'sw/sw.js'
79-
},
80-
plugins: [
81-
new ForkTsCheckerWebpackPlugin(),
82-
]
83-
})];
104+
...['leanplum.js', 'leanplum.min.js'].map(name => buildFile(name, {
105+
entry: './src/bundles/leanplum.full.ts',
106+
output: {
107+
library: libraryName,
108+
libraryTarget: 'umd'
109+
}
110+
})),
111+
...['sw/sw.js', 'sw/sw.min.js'].map(name => buildFile(name, {
112+
entry: './src/PushServiceWorker.ts',
113+
}))
114+
];

0 commit comments

Comments
 (0)