Merge pull request #209 from unix/examples

chore: add example for tree-shaking
2026-02-02 09:08:52 +08:00 · 2020-05-16 01:36:49 +08:00
parent 69dc8ec61d 0bdc783c97
commit cbea284f71
18 changed files with 16706 additions and 0 deletions
--- a/examples/tree-shaking-create-react-app/README.md
+++ b/examples/tree-shaking-create-react-app/README.md
@@ -0,0 +1,24 @@
+## Tree shaking for create react app
+
+This is example of `tree-shaking` for [create-react-app](https://github.com/facebook/create-react-app).
+By default, we do not `eject` configs from `create-react-app`, in this example,
+we use [react-app-rewired](https://github.com/timarney/react-app-rewired) to change the default configs.
+
+### About
+
+  - Add `config-overrides.js` to your root folder.
+  - Add deps: `yarn add babel-plugin-import  customize-cra react-app-rewired -D`
+  - Replace your default scripts(`react-scripts`) with `react-app-rewired`.
+
+
+### Previews
+
+**Before:**
+
+![before](public/esm-1.png)
+
+<br />
+
+**After:**
+
+![after](public/esm-2.png)
--- a/examples/tree-shaking-create-react-app/config-overrides.js
+++ b/examples/tree-shaking-create-react-app/config-overrides.js
@@ -0,0 +1,6 @@
+const { override, fixBabelImports } = require('customize-cra');
+ module.exports = override(
+   fixBabelImports('@zeit-ui/react', {
+     libraryDirectory: 'esm',
+   }),
+ );
--- a/examples/tree-shaking-create-react-app/package.json
+++ b/examples/tree-shaking-create-react-app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "custom-styles",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
+  },
+  "dependencies": {
+    "@zeit-ui/react": "^1.5.0-rc.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.32",
+    "@types/react-dom": "^16.9.6",
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^0.9.1",
+    "react-app-rewired": "^2.1.6",
+    "react-scripts": "^3.4.1",
+    "source-map-explorer": "^2.4.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/examples/tree-shaking-create-react-app/public/esm-1.png
+++ b/examples/tree-shaking-create-react-app/public/esm-1.png
--- a/examples/tree-shaking-create-react-app/public/esm-2.png
+++ b/examples/tree-shaking-create-react-app/public/esm-2.png
--- a/examples/tree-shaking-create-react-app/public/index.html
+++ b/examples/tree-shaking-create-react-app/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tree Shaking</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
--- a/examples/tree-shaking-create-react-app/src/home.jsx
+++ b/examples/tree-shaking-create-react-app/src/home.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Page, Text, Button } from '@zeit-ui/react'
+
+const Home = () => (
+  <Page>
+    <Text>Hello world.</Text>
+    <Button>Action</Button>
+  </Page>
+)
+
+export default Home
--- a/examples/tree-shaking-create-react-app/src/index.jsx
+++ b/examples/tree-shaking-create-react-app/src/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
+import Home from './home'
+
+const App = () => {
+  return (
+    <ZeitProvider>
+      <CssBaseline />
+      <Home />
+    </ZeitProvider>
+  )
+}
+
+ReactDom.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('app'),
+)
+
+export default App
--- a/examples/tree-shaking-create-react-app/yarn.lock
+++ b/examples/tree-shaking-create-react-app/yarn.lock
--- a/examples/tree-shaking-webpack/.babelrc
+++ b/examples/tree-shaking-webpack/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["import", { "libraryName": "@zeit-ui/react", "libraryDirectory": "esm"}]
+  ]
+}
--- a/examples/tree-shaking-webpack/README.md
+++ b/examples/tree-shaking-webpack/README.md
@@ -0,0 +1,17 @@
+## Tree shaking for webpack
+
+### About
+
+If you use `webpack` and `babel` to build your Recat project, this example may be useful for you.
+
+### Previews
+
+**Before:**
+
+![before](esm-1.png)
+
+<br />
+
+**After:**
+
+![after](esm-2.png)
--- a/examples/tree-shaking-webpack/esm-1.png
+++ b/examples/tree-shaking-webpack/esm-1.png
--- a/examples/tree-shaking-webpack/esm-2.png
+++ b/examples/tree-shaking-webpack/esm-2.png
--- a/examples/tree-shaking-webpack/package.json
+++ b/examples/tree-shaking-webpack/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "tree-shaking-webpack",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "build": "webpack --config ./webpack.config.js",
+    "analyze": "source-map-explorer 'dist/*.js'"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "html-webpack-plugin": "^4.3.0",
+    "source-map-explorer": "^2.4.2",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@zeit-ui/react": "^1.5.0-rc.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
--- a/examples/tree-shaking-webpack/src/index.html
+++ b/examples/tree-shaking-webpack/src/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tree Shaking</title>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>
--- a/examples/tree-shaking-webpack/src/index.js
+++ b/examples/tree-shaking-webpack/src/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ZeitProvider, CssBaseline, Page, Button } from '@zeit-ui/react'
+
+const App = () => {
+  return (
+    <Page>
+      <p>Hello, world.</p>
+      <Button>Action</Button>
+    </Page>
+  )
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ZeitProvider>
+      <CssBaseline />
+      <App />
+    </ZeitProvider>
+  </React.StrictMode>,
+  document.getElementById('app')
+)
--- a/examples/tree-shaking-webpack/webpack.config.js
+++ b/examples/tree-shaking-webpack/webpack.config.js
@@ -0,0 +1,40 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: './src/index.js',
+  
+  devtool: 'source-map',
+  
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      }
+    ]
+  },
+  
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'bundle.js',
+  },
+  
+  plugins: [
+    new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') }),
+  ],
+  
+  devServer: {
+    host: '127.0.0.1',
+    port: '3000',
+    contentBase: './dist',
+    hot: true,
+    open: true,
+  }
+};
--- a/examples/tree-shaking-webpack/yarn.lock
+++ b/examples/tree-shaking-webpack/yarn.lock