react、webpack升级记录

拼搏现实的明天。 2023-06-19 09:49 54阅读 0赞

### webpack配置 ###

> `json-loader`（webpack4 内置）

> `devServer.progress - 只用于命令行工具(CLI)`

> 官方升级信息：https://www.webpackjs.com/guides/migrating/

> webpack.optimize.CommonsChunkPlugin插件变动

`webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.`

*  参考：
    
     *  https://www.jianshu.com/p/2cc8457f1a10
     *  https://www.webpackjs.com/plugins/split-chunks-plugin/

> webpack配置`1module.loaders` => `module.rules`

> error： `configuration.resolve.extensions[0] should be an non-empty string.`

*  `extensions: ['', '.js', '.jsx', '.json']`不能有空字符串

> webpack配置：resolve.modulesDirectories 被移除

> `resolve.root` => `modules: [ path.join(__dirname, "src"), 'node_modules' ],`

> “bootstrap-sass-loader”: “1.0.10”, => bootstrap-loader

*  bootstrap-sass-loader不在维护，官方推荐 bootstrap-loader，
 *  bootstrap.config.js => .bootstraprc

> file-loader高版本，background：url（）;使用动态路径时，编译后显示`background: url([object Module])`,固定版本到 `1.1.11`,问题消失

### React ###

> `'react/lib/update'` => `react-addons-update`

> `PropTypes` => `prop-types`

> “uglify-js”: “2.8.29”,

*  原sem `package.json`里面并没有`uglify-js`依赖，但能用（不知道为什么）,注意uglify-js两个大版本api差异

> React.createClass废弃改为 ES6方式，=> class Name extends Component \{\}

> warning:`Input contains an input of type text with both value and defaultValue props.`

*  同时使用 value 和 defaultValue属性造成，由于受控组件和非受控组件混用造成

> Warning: `A future version of React will block javascript: URLs as a security precaution.` 类似 `<a href={javascript:;}/>`&`<a href={javascript:void(0)}/>`被禁止

*  `replacing javascript:void(0) to href='#' onClick={e => e.preventDefault()}>`

### Router ###

> 使用按需加载，提倡ES6方式

getComponent(location, cb) {
        import('../index').then(c => cb(null, c.default));
    }

## 快速更新PropTypes脚本 ##

/**
     * 用于快速替换 PropTypes
     * 
     * 换行类型会变为crlf注意
     */
    
    const fs = require('fs');
    const path = require('path');
    /**
     * 含有PropTypes的文件夹
     * 
     * 修改数组内项，src目录下目标文件夹名称
     */
    const targetDirs = [
        'components',
        'containers',
    ].map(item => path.resolve(__dirname, `src/${item}`));
    function d(dirPath) {
        fs.readdir(dirPath, (err, files) => {
            if(err) {
                console.warn(err);
            } else {
                files.forEach(item => {
                    const itemPath = path.join(dirPath, item);
                    fs.stat(itemPath, (err, stats) => {
                        if(stats.isDirectory()) {
                            d(itemPath);
                        } else {
                            if(item.indexOf('.js') != -1) {
                                let data = fs.readFileSync(itemPath).toString().split('\n');
                                data = data.map(line => {
                                    if(line.indexOf('PropTypes') != -1 && line.indexOf('react') != -1 && line.indexOf('react') != -1) {
                                        // 这里格式不要动！模板字符串
                                        return `
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';`
                                    } else {
                                        return line
                                    }.join('\n');
                                fs.writeFileSync(itemPath, data);
                            }
                        }                    
                    })
                })
            }
        })
    }
    targetDirs.forEach(dirPath => {
       d(dirPath)
    });