migration

sourcecode/project-migration/stage-0/.babelrc

@@ -0,0 +1,10 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread"
+    ]
+}

sourcecode/project-migration/stage-0/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

sourcecode/project-migration/stage-0/README.md

@@ -0,0 +1,4 @@
+实战篇 渐进式迁移策略
+===============
+
+JavaScript 原始工程

sourcecode/project-migration/stage-0/build/webpack.base.config.js

@@ -0,0 +1,34 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+    entry: {
+        'app': './src/index.jsx'
+    },
+    output: {
+        filename: '[name].[chunkhash:8].js'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                use: [{
+                    loader: 'babel-loader'
+                }],
+                exclude: /node_modules/
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/tpl/index.html'
+        })
+    ],
+    optimization: {
+        splitChunks: {
+            chunks: 'all'
+        }
+    }
+}

sourcecode/project-migration/stage-0/build/webpack.config.js

@@ -0,0 +1,9 @@
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.base.config')
+const devConfig = require('./webpack.dev.config')
+const proConfig = require('./webpack.pro.config')
+
+module.exports = (env, argv) => {
+    let config = argv.mode === 'development' ? devConfig : proConfig;
+    return merge(baseConfig, config);
+};

sourcecode/project-migration/stage-0/build/webpack.dev.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    devtool: 'cheap-module-eval-source-map',
+    devServer: {
+        port: 8080
+    }
+}

sourcecode/project-migration/stage-0/build/webpack.pro.config.js

@@ -0,0 +1,7 @@
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+module.exports = {
+    plugins: [
+        new CleanWebpackPlugin()
+    ]
+}

sourcecode/project-migration/stage-0/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "project-migration",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/index.jsx",
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
+    "build": "webpack --mode=production --config ./build/webpack.config.js"
+  },
+  "keywords": [
+    "TypeScript"
+  ],
+  "author": "liangxiao",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.5.1",
+    "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  }
+}

sourcecode/project-migration/stage-0/src/components/Hello.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Hello extends Component {
+    state = {
+        count: 0
+    }
+    static defaultProps = {
+        firstName: '',
+        lastName: ''
+    }
+    render() {
+        return (
+            <>
+                <p>你点击了 {this.state.count} 次</p>
+                <button onClick={() => {this.setState({count: this.state.count + 1})}}>
+                    Hello {this.props.name}
+                </button>
+            </>
+        )
+    }
+}
+Hello.propTypes = {
+    name: PropTypes.string.isRequired,
+    firstName: PropTypes.string,
+    lastName: PropTypes.string
+}
+
+export default Hello;

sourcecode/project-migration/stage-0/src/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Hello from './components/Hello';
+
+import { add } from './utils/a';
+
+add(1, 1)
+
+ReactDOM.render(
+    <div>
+        <Hello name="World" />
+    </div>,
+    document.querySelectorAll('.app')[0]
+);

sourcecode/project-migration/stage-0/src/tpl/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Project Migration</title>
+</head>
+<body>
+    <div class="app"></div>
+</body>
+</html>

sourcecode/project-migration/stage-0/src/utils/a.js

@@ -0,0 +1,3 @@
+export function add(x, y) {
+    return x + y
+}

sourcecode/project-migration/stage-1/.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ],
+    "plugins": [
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread"
+    ]
+}

sourcecode/project-migration/stage-1/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

sourcecode/project-migration/stage-1/README.md

@@ -0,0 +1,4 @@
+实战篇 渐进式迁移策略
+===============
+
+JavaScript + TypeScript 共存策略

sourcecode/project-migration/stage-1/build/webpack.base.config.js

@@ -0,0 +1,34 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+    entry: {
+        'app': './src/index.jsx'
+    },
+    output: {
+        filename: '[name].[chunkhash:8].js'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(j|t)sx?$/,
+                use: [{
+                    loader: 'babel-loader'
+                }],
+                exclude: /node_modules/
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/tpl/index.html'
+        })
+    ],
+    optimization: {
+        splitChunks: {
+            chunks: 'all'
+        }
+    }
+}

sourcecode/project-migration/stage-1/build/webpack.config.js

@@ -0,0 +1,9 @@
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.base.config')
+const devConfig = require('./webpack.dev.config')
+const proConfig = require('./webpack.pro.config')
+
+module.exports = (env, argv) => {
+    let config = argv.mode === 'development' ? devConfig : proConfig;
+    return merge(baseConfig, config);
+};

sourcecode/project-migration/stage-1/build/webpack.dev.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    devtool: 'cheap-module-eval-source-map',
+    devServer: {
+        port: 8080
+    }
+}

sourcecode/project-migration/stage-1/build/webpack.pro.config.js

@@ -0,0 +1,7 @@
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+module.exports = {
+    plugins: [
+        new CleanWebpackPlugin()
+    ]
+}

sourcecode/project-migration/stage-1/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "project-migration",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/index.jsx",
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
+    "build": "webpack --mode=production --config ./build/webpack.config.js",
+    "type-check": "tsc --watch"
+  },
+  "keywords": [
+    "TypeScript"
+  ],
+  "author": "liangxiao",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.8.5",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.3",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.5.1",
+    "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  }
+}

sourcecode/project-migration/stage-1/src/components/Hello.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Hello extends Component {
+    state = {
+        count: 0
+    }
+    static defaultProps = {
+        firstName: '',
+        lastName: ''
+    }
+    render() {
+        return (
+            <>
+                <p>你点击了 {this.state.count} 次</p>
+                <button onClick={() => {this.setState({count: this.state.count + 1})}}>
+                    Hello {this.props.name}
+                </button>
+            </>
+        )
+    }
+}
+Hello.propTypes = {
+    name: PropTypes.string.isRequired,
+    firstName: PropTypes.string,
+    lastName: PropTypes.string
+}
+
+export default Hello;

sourcecode/project-migration/stage-1/src/components/Hi.tsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+
+interface Props {
+    name: string;
+    firstName?: string;
+    lastName?: string;
+}
+interface State {
+    count: number
+}
+
+class Hi extends Component<Props, State> {
+    state = {
+        count: 0
+    }
+    static defaultProps = {
+        firstName: '',
+        lastName: ''
+    }
+    render() {
+        return (
+            <>
+                <p>你点击了 {this.state.count} 次</p>
+                <button onClick={() => {this.setState({count: this.state.count + 1})}}>
+                    Hi {this.props.name}
+                </button>
+            </>
+        )
+    }
+}
+
+export default Hi;

sourcecode/project-migration/stage-1/src/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Hello from './components/Hello';
+import Hi from './components/Hi';
+
+import { add } from './utils/a';
+import { sub } from './utils/b';
+
+add(1, 1)
+sub(1, 1)
+
+ReactDOM.render(
+    <div>
+        <Hello name="World" />
+        <Hi name="World" />
+    </div>,
+    document.querySelectorAll('.app')[0]
+);