Release: plugin-component-1.9.0 (ice-lab#242)

* feat: 🎸 upgrade build-scripts-config * fix: 🐛 compatible with mini-css-extract-plugin 1.x (ice-lab#240)
zyy7259 · Nov 18, 2021 · 28db2e8 · 28db2e8
1 parent bbe2e7b
commit 28db2e8
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/packages/build-plugin-component/CHANGELOG.md b/packages/build-plugin-component/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.9.0
+
+- [feat] upgrade `build-scripts-config` to 3.x.
+- [fix] compatible with mini-css-extract-plugin 1.x.
+- [fix] avoid wrong result when compiling `Class` with babel.
 
 ## 1.8.2
 

diff --git a/packages/build-plugin-component/package.json b/packages/build-plugin-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-component",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "build plugin for component development",
   "main": "src/index.js",
   "scripts": {
@@ -23,13 +23,16 @@
     "@babel/core": "^7.1.2",
     "@babel/generator": "^7.7.2",
     "@babel/parser": "^7.7.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-private-methods": "^7.16.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/traverse": "^7.7.2",
     "@babel/types": "^7.7.2",
     "babel-plugin-import": "^1.12.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-define": "^2.0.0",
-    "build-scripts-config": "^0.1.0",
+    "build-scripts-config": "^3.0.0",
     "camelcase": "^6.2.0",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
     "chalk": "^4.1.0",

diff --git a/packages/build-plugin-component/src/utils/getCompileBabel.js b/packages/build-plugin-component/src/utils/getCompileBabel.js
@@ -5,17 +5,20 @@ module.exports = (options = {}, { babelPlugins, babelOptions, rootDir }) => {
   const { modules } = options;
 
   const defaultBabel = getBabelConfig();
-  // add @babel/plugin-transform-runtime
-  defaultBabel.plugins.push([
-    require.resolve('@babel/plugin-transform-runtime'),
-    {
+
+  const additionalPlugins = [
+    ['@babel/plugin-transform-runtime', {
       corejs: false,
       helpers: true,
       regenerator: true,
       useESModules: false,
-    },
-  ]);
-  defaultBabel.plugins = [...defaultBabel.plugins, ...((babelPlugins || []).map((plugin) => {
+    }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+  ];
+
+  defaultBabel.plugins = [...defaultBabel.plugins, ...additionalPlugins, ...((babelPlugins || []).map((plugin) => {
     const [plguinName, pluginOptions, ...restOptions] = Array.isArray(plugin) ? plugin : [plugin];
     const pluginPath = require.resolve(plguinName, { paths: [rootDir] });
     if (pluginOptions) {
@@ -29,7 +32,7 @@ module.exports = (options = {}, { babelPlugins, babelOptions, rootDir }) => {
     }
   }))];
   // modify @babel/preset-env options
-  defaultBabel.presets = defaultBabel.presets.map(preset => {
+  defaultBabel.presets = defaultBabel.presets.map((preset) => {
     const [presetPath, presetOptions] = Array.isArray(preset) ? preset : [preset];
     const targetConfig = babelOptions.find(({ name }) => (formatPathForWin(presetPath).indexOf(name) > -1));
     const modifyOptions = targetConfig && targetConfig.options;

diff --git a/packages/build-plugin-component/src/utils/setCSSRule.js b/packages/build-plugin-component/src/utils/setCSSRule.js
@@ -48,6 +48,9 @@ module.exports = (config, useStylesheetLoader) => {
       .test(/\.css?$/)
       .use('MiniCssExtractPlugin.loader')
       .loader(MiniCssExtractPlugin.loader)
+      .options({
+        esModule: false,
+      })
       .end()
       .use('css')
       .loader(require.resolve('css-loader'))
@@ -61,6 +64,9 @@ module.exports = (config, useStylesheetLoader) => {
       .test(/\.less?$/)
       .use('MiniCssExtractPlugin.loader')
       .loader(MiniCssExtractPlugin.loader)
+      .options({
+        esModule: false,
+      })
       .end()
       .use('css-loader')
       .loader(require.resolve('css-loader'))
@@ -77,6 +83,9 @@ module.exports = (config, useStylesheetLoader) => {
       .test(/\.scss?$/)
       .use('MiniCssExtractPlugin.loader')
       .loader(MiniCssExtractPlugin.loader)
+      .options({
+        esModule: false,
+      })
       .end()
       .use('css-loader')
       .loader(require.resolve('css-loader'))