Merge pull request #987 from alibaba/rax-scripts

rax-scripts 1.2.0
alibaba · Mar 20, 2019 · 9391edb · 9391edb
2 parents 15547c8 + adea9d8
commit 9391edb
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 44 deletions.
diff --git a/packages/rax-cli/package.json b/packages/rax-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-cli",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "BSD-3-Clause",
   "description": "Command line interface for Rax",
   "main": "src/index.js",

diff --git a/packages/rax-cli/src/generator/miniapp/README.md b/packages/rax-cli/src/generator/miniapp/README.md
@@ -1,4 +1,4 @@
-# rax-starter-kit
+# MiniApp Starter Kit
 
 ## Getting Started
 
@@ -17,8 +17,3 @@ You will see the lint errors in the console.
 ### `npm run build`
 
 Builds the app for production to the `build` folder.
-
-## Universal "Gotchas"
-
-- DOM & DOM like **`window`** & **`document`** do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work.
-- If you need to use them, consider limiting them to wrapping them situationally with the imported *isWeb / isNode / isWeex* features from Universal. `import {isWeb, isWeex, isNode} from 'universal-env'`;
diff --git a/packages/rax-cli/src/generator/miniapp/package.json b/packages/rax-cli/src/generator/miniapp/package.json
@@ -11,7 +11,7 @@
     "rax": "^1.0.0"
   },
   "devDependencies": {
-    "rax-scripts": "^1.1.0",
+    "rax-scripts": "^1.2.0",
     "eslint": "^5.15.1",
     "babel-eslint": "^10.0.1"
   }

diff --git a/packages/rax-cli/src/generator/webapp/README.md b/packages/rax-cli/src/generator/webapp/README.md
@@ -1,4 +1,4 @@
-# rax-starter-kit
+# WebApp Starter Kit
 
 ## Getting Started
 
@@ -17,3 +17,8 @@ You will see the lint errors in the console.
 ### `npm run build`
 
 Builds the app for production to the `build` folder.
+
+
+## Post-Processing CSS
+
+You can customize your target support browsers by adjusting the `browserslist` key in `package.json` according to the [Browserslist specification](https://github.com/browserslist/browserslist#readme).
diff --git a/packages/rax-cli/src/generator/webapp/package.json b/packages/rax-cli/src/generator/webapp/package.json
@@ -2,6 +2,10 @@
   "name": "__YourProjectName__",
   "author": "__AuthorName__",
   "version": "0.0.0",
+  "browserslist": [
+    "last 1 version",
+    "> 1%"
+  ],
   "scripts": {
     "start": "rax-scripts start",
     "build": "rax-scripts build",
@@ -12,7 +16,7 @@
     "driver-dom": "^1.0.0"
   },
   "devDependencies": {
-    "rax-scripts": "^1.1.0",
+    "rax-scripts": "^1.2.0",
     "eslint": "^5.15.1",
     "babel-eslint": "^10.0.1",
     "eslint-plugin-react": "^7.12.4"

diff --git a/packages/rax-cli/src/generator/weexapp/README.md b/packages/rax-cli/src/generator/weexapp/README.md
@@ -1,4 +1,4 @@
-# rax-starter-kit
+# WeexApp Starter Kit
 
 ## Getting Started
 

diff --git a/packages/rax-cli/src/generator/weexapp/package.json b/packages/rax-cli/src/generator/weexapp/package.json
@@ -12,7 +12,7 @@
     "driver-weex": "^1.0.0"
   },
   "devDependencies": {
-    "rax-scripts": "^1.1.0",
+    "rax-scripts": "^1.2.0",
     "eslint": "^5.15.1",
     "babel-eslint": "^10.0.1",
     "eslint-plugin-react": "^7.12.4"

diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-scripts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "BSD-3-Clause",
   "description": "Project scripts for Rax.",
   "bin": {
@@ -44,19 +44,21 @@
     "commander": "^2.19.0",
     "copy-webpack-plugin": "^4.6.0",
     "cross-spawn": "^6.0.5",
-    "css-loader": "^2.1.0",
+    "css-loader": "^2.1.1",
     "decamelize": "^2.0.0",
     "file-loader": "^2.0.0",
     "glob": "^7.1.3",
     "html-webpack-plugin": "^3.2.0",
     "image-source-loader": "^0.6.5",
     "internal-ip": "^3.0.1",
-    "json-loader": "^0.5.7",
     "loader-utils": "^1.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "minimatch": "^3.0.4",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-exists": "^3.0.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.6.0",
     "rax-hot-loader": "^0.6.5",
     "rax-hot-module-replacement-webpack-plugin": "^0.6.5",
     "rax-webpack-plugin": "^0.6.5",

diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.base.js b/packages/rax-scripts/src/config/webapp/webpack.config.base.js
@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpackConfig = require('../webpack.config');
 const pathConfig = require('../path.config');
 const babelConfig = require('../babel.config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 babelConfig.presets.push([
   require.resolve('@babel/preset-react'), {
@@ -13,10 +14,6 @@ babelConfig.presets.push([
   }
 ]);
 
-babelConfig.plugins.push(
-  require.resolve('babel-plugin-transform-jsx-stylesheet')
-);
-
 module.exports = {
   mode: webpackConfig.mode,
   context: webpackConfig.context,
@@ -32,6 +29,10 @@ module.exports = {
       inject: true,
       template: pathConfig.appHtml,
     }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[id].css',
+    }),
     webpackConfig.plugins.define,
     webpackConfig.plugins.caseSensitivePaths,
     process.env.ANALYZER ? new BundleAnalyzerPlugin() : null,
@@ -61,19 +62,26 @@ module.exports = {
         test: /\.css$/,
         use: [
           {
-            loader: require.resolve('stylesheet-loader'),
+            loader: MiniCssExtractPlugin.loader,
           },
-        ],
-      },
-      // JSON is not enabled by default in Webpack but both Node and Browserify
-      // allow it implicitly so we also enable it.
-      {
-        test: /\.json$/,
-        use: [
           {
-            loader: require.resolve('json-loader'),
+            loader: require.resolve('css-loader'),
           },
-        ],
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                require('postcss-preset-env')({
+                  autoprefixer: {
+                    flexbox: 'no-2009',
+                  },
+                  stage: 3,
+                }),
+              ],
+            }
+          },
+        ]
       },
       // load inline images using image-source-loader for Image
       {

diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.prod.js b/packages/rax-scripts/src/config/webapp/webpack.config.prod.js
@@ -4,6 +4,7 @@ const pathConfig = require('../path.config');
 const webpackMerge = require('webpack-merge');
 const webpackConfigBase = require('./webpack.config.base');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 const webpackConfigProd = webpackMerge(webpackConfigBase, {
   target: 'node',
@@ -13,11 +14,17 @@ const webpackConfigProd = webpackMerge(webpackConfigBase, {
   },
   optimization: {
     minimize: true,
-    minimizer: [new UglifyJSPlugin({
-      include: /\.min\.js$/,
-      cache: true,
-      sourceMap: true,
-    })]
+    minimizer: [
+      new UglifyJSPlugin({
+        include: /\.min\.js$/,
+        cache: true,
+        sourceMap: true,
+      }),
+      new OptimizeCSSAssetsPlugin({
+        // A boolean indicating if the plugin can print messages to the console
+        canPrint: true
+      })
+    ]
   },
 });
 

diff --git a/packages/rax-scripts/src/config/weexapp/webpack.config.base.js b/packages/rax-scripts/src/config/weexapp/webpack.config.base.js
@@ -63,16 +63,6 @@ module.exports = {
           },
         ],
       },
-      // JSON is not enabled by default in Webpack but both Node and Browserify
-      // allow it implicitly so we also enable it.
-      {
-        test: /\.json$/,
-        use: [
-          {
-            loader: require.resolve('json-loader'),
-          },
-        ],
-      },
       // load inline images using image-source-loader for Image
       {
         test: /\.(svg|png|webp|jpe?g|gif)$/i,