balm-core 4.5.3 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/index.d.ts +1 -2
- package/lib/bootstrap/check_config.js +1 -1
- package/lib/bundler/webpack/config/common.js +18 -17
- package/lib/bundler/webpack/config/prod.js +12 -16
- package/lib/bundler/webpack/rules/css.js +7 -10
- package/lib/config/globals.js +1 -1
- package/lib/config/scripts.js +3 -5
- package/lib/plugins/sass.js +2 -2
- package/package.json +18 -18
- package/tslib/bootstrap/check_config.js +1 -1
- package/tslib/bundler/webpack/config/common.js +17 -6
- package/tslib/bundler/webpack/config/prod.js +14 -1
- package/tslib/bundler/webpack/rules/css.js +9 -1
- package/tslib/config/globals.js +1 -1
- package/tslib/config/scripts.js +2 -2
package/README.md
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
<p>An universal Front-End workflow for webapps</p>
|
|
14
14
|
</div>
|
|
15
15
|
|
|
16
|
+
> [`balm-core@3`](https://github.com/balmjs/balm/tree/master)(v3) supports for `node@10.13.0+`, `postcss@7`, `webpack@4`
|
|
17
|
+
|
|
16
18
|
## Introduction
|
|
17
19
|
|
|
18
20
|
BalmJS prescribes best practices and tools to help you stay productive.
|
|
@@ -91,7 +93,7 @@ yarn add -D balm@next
|
|
|
91
93
|
OR
|
|
92
94
|
|
|
93
95
|
```sh
|
|
94
|
-
npm install -g balm-core@next
|
|
96
|
+
npm install -g balm-core@next # Not supported for now (npm bug)
|
|
95
97
|
npm install -D balm@next
|
|
96
98
|
```
|
|
97
99
|
|
package/index.d.ts
CHANGED
|
@@ -65,7 +65,6 @@ export type InputOptions = import('rollup').InputOptions;
|
|
|
65
65
|
export type OutputOptions = import('rollup').OutputOptions;
|
|
66
66
|
export type RollupOutput = import('rollup').RollupOutput;
|
|
67
67
|
export type RollupBuild = import('rollup').RollupBuild;
|
|
68
|
-
export type WatcherOptions = import('rollup').WatcherOptions;
|
|
69
68
|
|
|
70
69
|
// Esbuild
|
|
71
70
|
export type BuildOptions = import('esbuild').BuildOptions;
|
|
@@ -98,6 +97,7 @@ export interface BalmScripts {
|
|
|
98
97
|
plugins: object[];
|
|
99
98
|
injectHtml: boolean;
|
|
100
99
|
htmlPluginOptions: object;
|
|
100
|
+
extractCss: boolean;
|
|
101
101
|
sourceMap: string | boolean;
|
|
102
102
|
target: string | string[] | false;
|
|
103
103
|
externals: string | string[] | object | Function | RegExp;
|
|
@@ -110,7 +110,6 @@ export interface BalmScripts {
|
|
|
110
110
|
// rollup
|
|
111
111
|
inputOptions: Omit<InputOptions, 'acorn'>; // incompatible
|
|
112
112
|
outputOptions: OutputOptions;
|
|
113
|
-
watchOptions: WatcherOptions;
|
|
114
113
|
// esbuild
|
|
115
114
|
buildOptions: BuildOptions;
|
|
116
115
|
useTransform: boolean;
|
|
@@ -37,9 +37,9 @@ function checkConfig() {
|
|
|
37
37
|
upgradeDeprecated('3.17.0', 'styles', 'darkSass');
|
|
38
38
|
upgradeDeprecated('3.19.0', 'scripts', 'useCache'); // For v4
|
|
39
39
|
|
|
40
|
+
upgradeDeprecated('4.0.0', 'scripts', 'libraryTarget');
|
|
40
41
|
upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
|
|
41
42
|
upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
|
|
42
|
-
upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
export default checkConfig;
|
|
@@ -50,7 +50,7 @@ function getSplitChunks() {
|
|
|
50
50
|
// All vendors
|
|
51
51
|
const vendorsFilename = scripts.useCache ? `${scripts.vendorName}.${CHUNK.hash}.js` : `${scripts.vendorName}.js`;
|
|
52
52
|
cacheGroups = {
|
|
53
|
-
|
|
53
|
+
allVendors: {
|
|
54
54
|
name: 'vendors',
|
|
55
55
|
chunks: 'all',
|
|
56
56
|
test: /[\\/](node_modules|bower_components)[\\/]/,
|
|
@@ -63,11 +63,11 @@ function getSplitChunks() {
|
|
|
63
63
|
cacheGroups = {};
|
|
64
64
|
|
|
65
65
|
for (const vendor of BalmJS.vendors) {
|
|
66
|
-
const
|
|
66
|
+
const name = vendor.key;
|
|
67
67
|
const cacheGroupModules = vendor.value.join('|');
|
|
68
|
-
const vendorFilename = scripts.useCache ? `${
|
|
69
|
-
cacheGroups[
|
|
70
|
-
name
|
|
68
|
+
const vendorFilename = scripts.useCache ? `${name}.${CHUNK.hash}.js` : `${name}.js`;
|
|
69
|
+
cacheGroups[`${name}Scripts`] = {
|
|
70
|
+
name,
|
|
71
71
|
chunks: 'initial',
|
|
72
72
|
test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
|
|
73
73
|
filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
|
|
@@ -75,19 +75,20 @@ function getSplitChunks() {
|
|
|
75
75
|
enforce: true
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
|
-
}
|
|
79
|
-
// // Custom styles in scripts
|
|
80
|
-
// for (const entry of BalmJS.entries) {
|
|
81
|
-
// const name = entry.key;
|
|
82
|
-
// cacheGroups[`${name}Styles`] = {
|
|
83
|
-
// type: 'css/mini-extract',
|
|
84
|
-
// name,
|
|
85
|
-
// chunks: (chunk: { name: string }) => chunk.name === name,
|
|
86
|
-
// enforce: true
|
|
87
|
-
// };
|
|
88
|
-
// }
|
|
89
|
-
// }
|
|
78
|
+
}
|
|
90
79
|
|
|
80
|
+
if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
|
|
81
|
+
// Custom styles in scripts
|
|
82
|
+
for (const entry of BalmJS.entries) {
|
|
83
|
+
const name = entry.key;
|
|
84
|
+
cacheGroups[`${name}Styles`] = {
|
|
85
|
+
type: 'css/mini-extract',
|
|
86
|
+
name,
|
|
87
|
+
chunks: chunk => chunk.name === name,
|
|
88
|
+
enforce: true
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
}
|
|
91
92
|
|
|
92
93
|
return Object.keys(cacheGroups).length ? {
|
|
93
94
|
cacheGroups
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import TerserPlugin from 'terser-webpack-plugin';
|
|
2
|
-
|
|
2
|
+
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
|
|
3
|
+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
3
4
|
import webpackBundleAnalyzer from 'webpack-bundle-analyzer';
|
|
4
5
|
import { merge } from 'webpack-merge';
|
|
5
|
-
import getCommonConfig from './common.js';
|
|
6
|
-
|
|
6
|
+
import getCommonConfig from './common.js';
|
|
7
|
+
import { CHUNK } from '../../../config/constants.js';
|
|
7
8
|
// Run the build command with an extra argument to
|
|
8
9
|
// View the bundle analyzer report after build finishes:
|
|
9
10
|
// `npm run prod --report`
|
|
10
11
|
// Set to `true` or `false` to always turn it on or off
|
|
11
|
-
const bundleAnalyzerReport = process.env.npm_config_report || false;
|
|
12
|
-
|
|
12
|
+
const bundleAnalyzerReport = process.env.npm_config_report || false;
|
|
13
|
+
|
|
14
|
+
const getCssFilename = () => `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
|
|
13
15
|
|
|
14
16
|
function getProdConfig(webpack, scripts) {
|
|
15
17
|
const shouldUseSourceMap = scripts.sourceMap;
|
|
@@ -25,21 +27,15 @@ function getProdConfig(webpack, scripts) {
|
|
|
25
27
|
minimizer: [new TerserPlugin({
|
|
26
28
|
terserOptions,
|
|
27
29
|
extractComments: false
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
+
}), new CssMinimizerPlugin()]
|
|
30
31
|
},
|
|
31
32
|
plugins: [new webpack.DefinePlugin({
|
|
32
33
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
|
|
33
34
|
}), // Extract css into its own file
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
// chunkFilename: BalmJS.file.assetsPath(getCssFilename())
|
|
39
|
-
// })
|
|
40
|
-
// ]
|
|
41
|
-
// : []),
|
|
42
|
-
// View the bundle analyzer report
|
|
35
|
+
...(scripts.extractCss ? [new MiniCssExtractPlugin({
|
|
36
|
+
filename: BalmJS.file.assetsPath(getCssFilename()),
|
|
37
|
+
chunkFilename: BalmJS.file.assetsPath(getCssFilename())
|
|
38
|
+
})] : []), // View the bundle analyzer report
|
|
43
39
|
...(bundleAnalyzerReport ? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()] : [])],
|
|
44
40
|
devtool: shouldUseSourceMap ? 'source-map' : false
|
|
45
41
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
2
2
|
import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
|
|
3
3
|
|
|
4
4
|
// common function to get style loaders
|
|
@@ -6,15 +6,12 @@ function getStyleLoaders(styleLoader, cssOptions, preProcessor = '', sassOptions
|
|
|
6
6
|
const {
|
|
7
7
|
sourceMap
|
|
8
8
|
} = cssOptions;
|
|
9
|
-
const loaders = [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// }
|
|
16
|
-
// : styleLoader,
|
|
17
|
-
styleLoader, {
|
|
9
|
+
const loaders = [BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss ? {
|
|
10
|
+
loader: MiniCssExtractPlugin.loader,
|
|
11
|
+
options: {
|
|
12
|
+
esModule: BalmJS.config.scripts.useEsModule
|
|
13
|
+
}
|
|
14
|
+
} : styleLoader, {
|
|
18
15
|
loader: requireModule.resolve('css-loader'),
|
|
19
16
|
options: cssOptions
|
|
20
17
|
}, {
|
package/lib/config/globals.js
CHANGED
|
@@ -6,7 +6,7 @@ import through2 from 'through2';
|
|
|
6
6
|
import PluginError from 'plugin-error'; // Set env var for ORIGINAL cwd before anything touches it
|
|
7
7
|
|
|
8
8
|
process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
|
|
9
|
-
const gulpModule = path.join(process.env.
|
|
9
|
+
const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
|
|
10
10
|
|
|
11
11
|
if (fs.existsSync(gulpModule)) {
|
|
12
12
|
// Chdir before requiring balm config to make sure
|
package/lib/config/scripts.js
CHANGED
|
@@ -80,8 +80,8 @@ const alias = {}; // Plugins
|
|
|
80
80
|
|
|
81
81
|
const plugins = [];
|
|
82
82
|
const injectHtml = false;
|
|
83
|
-
const htmlPluginOptions = {};
|
|
84
|
-
// Devtool
|
|
83
|
+
const htmlPluginOptions = {};
|
|
84
|
+
const extractCss = false; // Devtool
|
|
85
85
|
|
|
86
86
|
const sourceMap = false; // Target
|
|
87
87
|
|
|
@@ -123,7 +123,6 @@ const ie8 = false;
|
|
|
123
123
|
|
|
124
124
|
const inputOptions = {};
|
|
125
125
|
const outputOptions = {};
|
|
126
|
-
const watchOptions = {};
|
|
127
126
|
/**
|
|
128
127
|
* Esbuild bundler
|
|
129
128
|
*/
|
|
@@ -152,7 +151,7 @@ export default {
|
|
|
152
151
|
plugins,
|
|
153
152
|
injectHtml,
|
|
154
153
|
htmlPluginOptions,
|
|
155
|
-
|
|
154
|
+
extractCss,
|
|
156
155
|
sourceMap,
|
|
157
156
|
target,
|
|
158
157
|
externals,
|
|
@@ -165,7 +164,6 @@ export default {
|
|
|
165
164
|
// rollup
|
|
166
165
|
inputOptions,
|
|
167
166
|
outputOptions,
|
|
168
|
-
watchOptions,
|
|
169
167
|
// esbuild
|
|
170
168
|
buildOptions,
|
|
171
169
|
useTransform,
|
package/lib/plugins/sass.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Reference `gulp-
|
|
1
|
+
// Reference `gulp-sass@5.1.0`
|
|
2
2
|
import { Transform } from 'node:stream';
|
|
3
3
|
import sass from 'sass';
|
|
4
4
|
import replaceExtension from 'replace-ext';
|
|
@@ -32,7 +32,7 @@ const filePush = (file, sassObject, callback) => {
|
|
|
32
32
|
const sourceFileIndex = sassMap.sources.indexOf(sassMapFile); // Prepend the path to all files in the sources array except the file that's being worked on
|
|
33
33
|
|
|
34
34
|
sassMap.sources = sassMap.sources.map((source, index) => index === sourceFileIndex ? source : node.path.join(sassFileSrcPath, source));
|
|
35
|
-
} // Remove 'stdin' from
|
|
35
|
+
} // Remove 'stdin' from sources and replace with filenames!
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
sassMap.sources = sassMap.sources.filter(src => src !== 'stdin' && src); // Replace the map file with the original filename (but new extension)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "balm-core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.6.0",
|
|
4
4
|
"description": "BalmJS compiler core",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"balm",
|
|
@@ -41,18 +41,17 @@
|
|
|
41
41
|
"directory": "packages/balm-core"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"ajv": "^8",
|
|
45
44
|
"ansi-colors": "^4.1.1",
|
|
46
45
|
"async": "^3.2.3",
|
|
47
|
-
"autoprefixer": "^10.4.
|
|
48
|
-
"babel-loader": "^8.2.
|
|
46
|
+
"autoprefixer": "^10.4.5",
|
|
47
|
+
"babel-loader": "^8.2.5",
|
|
49
48
|
"browser-sync": "^2.27.9",
|
|
50
49
|
"connect-history-api-fallback": "^1.6.0",
|
|
51
50
|
"css-loader": "^6.7.1",
|
|
52
51
|
"css-minimizer-webpack-plugin": "^3.4.1",
|
|
53
52
|
"cssnano": "^5.1.7",
|
|
54
53
|
"del": "^6.0.0",
|
|
55
|
-
"esbuild": "^0.14
|
|
54
|
+
"esbuild": "^0.14",
|
|
56
55
|
"fancy-log": "^2.0.0",
|
|
57
56
|
"gulp-eslint": "^6.0.0",
|
|
58
57
|
"gulp-if": "^3.0.0",
|
|
@@ -66,10 +65,11 @@
|
|
|
66
65
|
"html-loader": "^3.1.0",
|
|
67
66
|
"html-minifier": "^4.0.0",
|
|
68
67
|
"html-webpack-plugin": "^5.5.0",
|
|
69
|
-
"http-proxy-middleware": "^2.0.
|
|
68
|
+
"http-proxy-middleware": "^2.0.6",
|
|
70
69
|
"imagemin": "^8.0.1",
|
|
71
70
|
"istextorbinary": "^6.0.0",
|
|
72
71
|
"less": "^4.1.2",
|
|
72
|
+
"mini-css-extract-plugin": "2.5.2",
|
|
73
73
|
"modernizr": "^3.12.0",
|
|
74
74
|
"parents": "^1.0.1",
|
|
75
75
|
"plugin-error": "^1.0.1",
|
|
@@ -78,35 +78,35 @@
|
|
|
78
78
|
"postcss-import": "^14.1.0",
|
|
79
79
|
"postcss-load-config": "^3.1.4",
|
|
80
80
|
"postcss-loader": "6.2.1",
|
|
81
|
-
"postcss-preset-env": "^7.4.
|
|
81
|
+
"postcss-preset-env": "^7.4.4",
|
|
82
82
|
"pretty-bytes": "^6.0.0",
|
|
83
83
|
"readable-stream": "^3.6.0",
|
|
84
84
|
"replace-ext": "^2.0.0",
|
|
85
|
-
"rollup": "^2.70.
|
|
85
|
+
"rollup": "^2.70.2",
|
|
86
86
|
"rollup-plugin-terser": "^7.0.2",
|
|
87
|
-
"sass": "^1.
|
|
87
|
+
"sass": "^1.51.0",
|
|
88
88
|
"sass-loader": "^12.6.0",
|
|
89
|
-
"ssh2": "^1.
|
|
89
|
+
"ssh2": "^1.10.0",
|
|
90
90
|
"strip-ansi": "^7.0.1",
|
|
91
91
|
"style-loader": "^3.3.1",
|
|
92
|
-
"terser": "^5.
|
|
92
|
+
"terser": "^5.13.0",
|
|
93
93
|
"terser-webpack-plugin": "^5.3.1",
|
|
94
94
|
"through2": "^4.0.2",
|
|
95
95
|
"through2-concurrent": "^2.0.0",
|
|
96
|
-
"tslib": "^2.
|
|
96
|
+
"tslib": "^2.4.0",
|
|
97
97
|
"vinyl-sourcemaps-apply": "^0.2.1",
|
|
98
|
-
"webpack": "^5.
|
|
98
|
+
"webpack": "^5.72.0",
|
|
99
99
|
"webpack-bundle-analyzer": "^4.5.0",
|
|
100
100
|
"webpack-dev-middleware": "^5.3.1",
|
|
101
101
|
"webpack-hot-middleware": "^2.25.1",
|
|
102
102
|
"webpack-merge": "^5.8.0",
|
|
103
|
-
"workbox-build": "^6.5.
|
|
103
|
+
"workbox-build": "^6.5.3"
|
|
104
104
|
},
|
|
105
105
|
"devDependencies": {
|
|
106
|
-
"@swc/core": "^1.2
|
|
106
|
+
"@swc/core": "^1.2",
|
|
107
107
|
"@types/express": "^4.17.13",
|
|
108
|
-
"@types/node": "^17
|
|
109
|
-
"@types/uglify-js": "^3.13.
|
|
108
|
+
"@types/node": "^17",
|
|
109
|
+
"@types/uglify-js": "^3.13.2",
|
|
110
110
|
"@types/webpack": "^5.28.0"
|
|
111
111
|
},
|
|
112
112
|
"optionalDependencies": {
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"engines": {
|
|
119
119
|
"node": ">=12.13.0"
|
|
120
120
|
},
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "903c97e47597f09766bd1973aded4bcc5eb36201"
|
|
122
122
|
}
|
|
@@ -28,8 +28,8 @@ function checkConfig() {
|
|
|
28
28
|
upgradeRenamed('3.16.0', 'scripts', 'inject', 'useCache');
|
|
29
29
|
upgradeDeprecated('3.17.0', 'styles', 'darkSass');
|
|
30
30
|
upgradeDeprecated('3.19.0', 'scripts', 'useCache');
|
|
31
|
+
upgradeDeprecated('4.0.0', 'scripts', 'libraryTarget');
|
|
31
32
|
upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
|
|
32
33
|
upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
|
|
33
|
-
upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
|
|
34
34
|
}
|
|
35
35
|
export default checkConfig;
|
|
@@ -41,7 +41,7 @@ function getSplitChunks() {
|
|
|
41
41
|
? `${scripts.vendorName}.${CHUNK.hash}.js`
|
|
42
42
|
: `${scripts.vendorName}.js`;
|
|
43
43
|
cacheGroups = {
|
|
44
|
-
|
|
44
|
+
allVendors: {
|
|
45
45
|
name: 'vendors',
|
|
46
46
|
chunks: 'all',
|
|
47
47
|
test: /[\\/](node_modules|bower_components)[\\/]/,
|
|
@@ -52,13 +52,13 @@ function getSplitChunks() {
|
|
|
52
52
|
else if (BalmJS.vendors.length) {
|
|
53
53
|
cacheGroups = {};
|
|
54
54
|
for (const vendor of BalmJS.vendors) {
|
|
55
|
-
const
|
|
55
|
+
const name = vendor.key;
|
|
56
56
|
const cacheGroupModules = vendor.value.join('|');
|
|
57
57
|
const vendorFilename = scripts.useCache
|
|
58
|
-
? `${
|
|
59
|
-
: `${
|
|
60
|
-
cacheGroups[
|
|
61
|
-
name
|
|
58
|
+
? `${name}.${CHUNK.hash}.js`
|
|
59
|
+
: `${name}.js`;
|
|
60
|
+
cacheGroups[`${name}Scripts`] = {
|
|
61
|
+
name,
|
|
62
62
|
chunks: 'initial',
|
|
63
63
|
test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
|
|
64
64
|
filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
|
|
@@ -66,6 +66,17 @@ function getSplitChunks() {
|
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
+
if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
|
|
70
|
+
for (const entry of BalmJS.entries) {
|
|
71
|
+
const name = entry.key;
|
|
72
|
+
cacheGroups[`${name}Styles`] = {
|
|
73
|
+
type: 'css/mini-extract',
|
|
74
|
+
name,
|
|
75
|
+
chunks: (chunk) => chunk.name === name,
|
|
76
|
+
enforce: true
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}
|
|
69
80
|
return Object.keys(cacheGroups).length ? { cacheGroups } : false;
|
|
70
81
|
}
|
|
71
82
|
function getCommonConfig(webpack, scripts) {
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import TerserPlugin from 'terser-webpack-plugin';
|
|
2
|
+
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
|
|
3
|
+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
2
4
|
import webpackBundleAnalyzer from 'webpack-bundle-analyzer';
|
|
3
5
|
import { merge } from 'webpack-merge';
|
|
4
6
|
import getCommonConfig from './common.js';
|
|
7
|
+
import { CHUNK } from '../../../config/constants.js';
|
|
5
8
|
const bundleAnalyzerReport = process.env.npm_config_report || false;
|
|
9
|
+
const getCssFilename = () => `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
|
|
6
10
|
function getProdConfig(webpack, scripts) {
|
|
7
11
|
const shouldUseSourceMap = scripts.sourceMap;
|
|
8
12
|
const terserOptions = scripts.minifyOptions;
|
|
@@ -16,13 +20,22 @@ function getProdConfig(webpack, scripts) {
|
|
|
16
20
|
new TerserPlugin({
|
|
17
21
|
terserOptions,
|
|
18
22
|
extractComments: false
|
|
19
|
-
})
|
|
23
|
+
}),
|
|
24
|
+
new CssMinimizerPlugin()
|
|
20
25
|
]
|
|
21
26
|
},
|
|
22
27
|
plugins: [
|
|
23
28
|
new webpack.DefinePlugin({
|
|
24
29
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
|
|
25
30
|
}),
|
|
31
|
+
...(scripts.extractCss
|
|
32
|
+
? [
|
|
33
|
+
new MiniCssExtractPlugin({
|
|
34
|
+
filename: BalmJS.file.assetsPath(getCssFilename()),
|
|
35
|
+
chunkFilename: BalmJS.file.assetsPath(getCssFilename())
|
|
36
|
+
})
|
|
37
|
+
]
|
|
38
|
+
: []),
|
|
26
39
|
...(bundleAnalyzerReport
|
|
27
40
|
? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()]
|
|
28
41
|
: [])
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
1
2
|
import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
|
|
2
3
|
function getStyleLoaders(styleLoader, cssOptions, preProcessor = '', sassOptions = {}) {
|
|
3
4
|
const { sourceMap } = cssOptions;
|
|
4
5
|
const loaders = [
|
|
5
|
-
|
|
6
|
+
BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss
|
|
7
|
+
? {
|
|
8
|
+
loader: MiniCssExtractPlugin.loader,
|
|
9
|
+
options: {
|
|
10
|
+
esModule: BalmJS.config.scripts.useEsModule
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
: styleLoader,
|
|
6
14
|
{
|
|
7
15
|
loader: requireModule.resolve('css-loader'),
|
|
8
16
|
options: cssOptions
|
package/tslib/config/globals.js
CHANGED
|
@@ -5,7 +5,7 @@ import { create } from 'browser-sync';
|
|
|
5
5
|
import through2 from 'through2';
|
|
6
6
|
import PluginError from 'plugin-error';
|
|
7
7
|
process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
|
|
8
|
-
const gulpModule = path.join(process.env.
|
|
8
|
+
const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
|
|
9
9
|
if (fs.existsSync(gulpModule)) {
|
|
10
10
|
if (process.cwd() !== process.env.BALM_CWD) {
|
|
11
11
|
process.chdir(process.env.BALM_CWD);
|
package/tslib/config/scripts.js
CHANGED
|
@@ -32,6 +32,7 @@ const alias = {};
|
|
|
32
32
|
const plugins = [];
|
|
33
33
|
const injectHtml = false;
|
|
34
34
|
const htmlPluginOptions = {};
|
|
35
|
+
const extractCss = false;
|
|
35
36
|
const sourceMap = false;
|
|
36
37
|
const target = ['web', 'es5'];
|
|
37
38
|
const externals = '';
|
|
@@ -49,7 +50,6 @@ const vendorName = 'vendor';
|
|
|
49
50
|
const ie8 = false;
|
|
50
51
|
const inputOptions = {};
|
|
51
52
|
const outputOptions = {};
|
|
52
|
-
const watchOptions = {};
|
|
53
53
|
const buildOptions = {};
|
|
54
54
|
const useTransform = false;
|
|
55
55
|
const transformOptions = {};
|
|
@@ -72,6 +72,7 @@ export default {
|
|
|
72
72
|
plugins,
|
|
73
73
|
injectHtml,
|
|
74
74
|
htmlPluginOptions,
|
|
75
|
+
extractCss,
|
|
75
76
|
sourceMap,
|
|
76
77
|
target,
|
|
77
78
|
externals,
|
|
@@ -83,7 +84,6 @@ export default {
|
|
|
83
84
|
ie8,
|
|
84
85
|
inputOptions,
|
|
85
86
|
outputOptions,
|
|
86
|
-
watchOptions,
|
|
87
87
|
buildOptions,
|
|
88
88
|
useTransform,
|
|
89
89
|
transformOptions
|