react技術棧升級的過程

時間  2019-12-27
標籤 react 技術 升級 過程 欄目 React 简体版
原文   原文鏈接

第一階段：css

react15+react-router2+redux3+webpack1 升級到 react16+react-router3+redux4+webpack4html

1.react15升級到16 遇到的坑：
在react16中去除contextTypes ，致使this.context.router.push('/*') 須要替換成
this.props.router.push('/*') 。
2.webpack1升級到4遇到的坑：
（1）webpack4 中建議使用min-css-extract-plugin 分離css，sass等文件，取代插件extract-text-webpack-plugin 效率更高
（2）html-webpack-plugin 要升級到2.22.0及以上
（3）webpack4將webpack.optimize.CommonsChunkPlugin移除，使用和entry平級的optimization裏的屬性splitChunks來把提取出來的樣式和common.js會自動添加進發布模式的html文件中，原來的html文件中沒有，前提必須是mode=prodution 才生效。
（4）webpack4中把內置的webpack.DefinePlugin({'process.env':{NODE_ENV:JSON.stringify("development")}})去掉，添加了和entry平級的mode屬性，來區分環境。
mode的value有none/development/production 這3中屬性，若要在系統中使用，則用"process.env.NODE_ENV"變量來獲取，比較奇葩。
（5）entry的路徑原來的path.resolve(path.resolve(path.resolve(path.resolve(__dirname)),'src')，'app') 應替換爲相對路徑的'./src/App.jsx'。
（6）output的路徑原來的
path.resolve(path.resolve(__dirname),"dist") 應替換爲 path.join(path.join(__dirname),"dist")。
3. 最終的不一樣環境配置文件以下：
開發環境：node

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const APP_FILE = './src/App.jsx'; //根目錄文件app.jsx地址
const PUBLIC_PATH = '/huishangchao/dist';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發佈文件所存放的目錄

module.exports = {
    devtool: '#eval-source-map',
    stats: {
        children: true
    },
    mode:"development",
    entry:{
        app:APP_FILE
    },
    output: {
        publicPath: PUBLIC_PATH, //編譯好的文件，在服務器的路徑,這是靜態資源引用路徑
        path:BUILD_PATH , //編譯到當前目錄
        filename: '[name].js', //編譯後的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制範圍，提升打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 這裏的options選項參數能夠定義多大的圖片轉換爲base64
                        limit: 50000, // 表示小於50kb的圖片轉爲base64,大於50kb的是路徑
                        outputPath: 'images' //定義輸出的圖片文件夾
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根據模板插入css/js等生成最終HTML
            filename: '../index.html', //生成的html存放路徑，相對於 path
            template: './src/template/index.html', //html模板路徑
            inject: 'body',
            hash: true,
        })
    ],
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //後綴名自動補全
    }
};

sit環境：react

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目錄文件app.jsx地址
const PUBLIC_PATH = '/huishangchaoSit/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發佈文件所存放的目錄

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //編譯好的文件，在服務器的路徑,這是靜態資源引用路徑
        path:BUILD_PATH , //編譯到當前目錄
        filename: '[name].js', //編譯後的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制範圍，提升打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 這裏的options選項參數能夠定義多大的圖片轉換爲base64
                        limit: 50000, // 表示小於50kb的圖片轉爲base64,大於50kb的是路徑
                        outputPath: 'images' //定義輸出的圖片文件夾
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根據模板插入css/js等生成最終HTML
            filename: '../index.html', //生成的html存放路徑，相對於 path
            template: './src/template/index.html', //html模板路徑
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出來的樣式和common.js會自動添加進發布模式的html文件中，原來的html沒有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //後綴名自動補全
    }
};

uat環境：webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目錄文件app.jsx地址
const PUBLIC_PATH = '/huishangchaoUat/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發佈文件所存放的目錄

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //編譯好的文件，在服務器的路徑,這是靜態資源引用路徑
        path:BUILD_PATH , //編譯到當前目錄
        filename: '[name].js', //編譯後的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制範圍，提升打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 這裏的options選項參數能夠定義多大的圖片轉換爲base64
                        limit: 50000, // 表示小於50kb的圖片轉爲base64,大於50kb的是路徑
                        outputPath: 'images' //定義輸出的圖片文件夾
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根據模板插入css/js等生成最終HTML
            filename: '../index.html', //生成的html存放路徑，相對於 path
            template: './src/template/index.html', //html模板路徑
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出來的樣式和common.js會自動添加進發布模式的html文件中，原來的html沒有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //後綴名自動補全
    }
};

生產環境：web

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目錄文件app.jsx地址
const PUBLIC_PATH = '/huishangchao/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發佈文件所存放的目錄

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //編譯好的文件，在服務器的路徑,這是靜態資源引用路徑
        path:BUILD_PATH , //編譯到當前目錄
        filename: '[name].js', //編譯後的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制範圍，提升打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 這裏的options選項參數能夠定義多大的圖片轉換爲base64
                        limit: 50000, // 表示小於50kb的圖片轉爲base64,大於50kb的是路徑
                        outputPath: 'images' //定義輸出的圖片文件夾
                    }
                }]
            }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production') //定義編譯環境
            }
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根據模板插入css/js等生成最終HTML
            filename: '../index.html', //生成的html存放路徑，相對於 path
            template: './src/template/index.html', //html模板路徑
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出來的樣式和common.js會自動添加進發布模式的html文件中，原來的html沒有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //後綴名自動補全
    }
};

4.升級後的package.json文件：express

{
  "name": "hsc",
  "version": "1.0.0",
  "description": "hsc",
  "main": "index.html",
  "scripts": {
    "dev": "node server.js",
    "sit": "webpack --config webpack.config.sit.js --progress --colors --watch -p",
    "uat": "webpack --config webpack.config.uat.js --progress --colors --watch -p",
    "dist": "webpack --config webpack.config.dist.js --progress --colors --watch -p"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "author": "cheer",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router": "3.2.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "ajv": "^6.0.0",
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "clipboard": "^2.0.1",
    "css-loader": "^1.0.0",
    "express": "^4.16.3",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-fetch": "^2.2.1",
    "jsx-loader": "^0.13.2",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "postcss-loader": "^3.0.0",
    "promise-polyfill": "^8.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.2.0",
    "webpack-dev-server": "^3.1.7"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程