react技术栈升级的过程

Ethan815 发布于2019-08-23 11:56 / 2015人阅读

摘要：第一阶段升级到升级到遇到的坑在中去除，导致需要替换成。中把内置的去掉，添加了和平级的属性，来区分环境。的有这中属性，若要在系统中使用，则用变量来获取，比较奇葩。的路径原来的，应替换为相对路径的。

第一阶段：

react15+react-router2+redux3+webpack1 升级到 react16+react-router3+redux4+webpack4

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. 最终的不同环境配置文件如下：
开发环境：

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环境：

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环境：

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"], //后缀名自动补全
    }
};

生产环境：

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文件：

{
  "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"
  ]
}

idc机房托管云服务器 java双栈过程打印存储过程升级技术栈全栈技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97689.html

技术栈：小菜前端的技术栈是如何规划和演进的

摘要：本文以管理者的视角，与大家分享下我自年月入职小菜后，与前端同学一起是如何规划团队的技术栈的，这条技术栈上的技能点又是如何在不同童鞋不同业务中生长出来的。 Scott 近两年无论是面试还是线下线上的技术分享，遇到许许多多前端同学，由于团队原因，个人原因，职业成长，技术方向，甚至家庭等等原因，在理想国与现实之间，在放弃与坚守之间，摇摆不停，心酸硬抗，大家可以找我聊聊南聊聊北，对工程师的宿命...

betacat 2019-08-23 17:09 评论0 收藏0
全栈最后一公里 - Node.js 项目的线上服务器部署与发布

摘要：没有耐心阅读的同学，可以直接前往学习全栈最后一公里。我下面会罗列一些，我自己录制过的一些项目，或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文，阅读需谨慎，长约 7000 字，通读需 5 分钟大家好，我是 Scott，本文通过提供给大家学习的方法，...

singerye 2019-05-29 19:29 评论0 收藏0
全栈最后一公里 - Node.js 项目的线上服务器部署与发布

摘要：没有耐心阅读的同学，可以直接前往学习全栈最后一公里。我下面会罗列一些，我自己录制过的一些项目，或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文，阅读需谨慎，长约 7000 字，通读需 5 分钟大家好，我是 Scott，本文通过提供给大家学习的方法，...

Nosee 2019-06-26 17:14 评论0 收藏0
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0
《阿里云前端技术周刊》第二期

摘要：作者也树校对染陌素材也树英布阿里云前端技术周刊由阿里云智能商业中台体验技术团队整理编写。如何在工作中快速成长致工程师的个简单技巧工程师成长干货，全文提纲如下，图片来自阿里技术公众号关于我们我们是阿里云智能中台体验技术团队。作者：@也树校对：@染陌素材：@也树、@英布《阿里云前端技术周刊》由阿里云智能商业中台体验技术团队整理编写。知乎：阿里云中台前端/全栈团队专栏 Github...

kyanag 2019-08-23 17:10 评论0 收藏0