项目支持可选运算符配置引来的一系列问题

之前的一个很老的项目。想用可选运算符时，发现不支持。于是开启了一系列升级之路。

因为之前用的是babel@6.26.0。经过查询后，发现可选运算符只在babel@7.x版本上才支持。所以只能升级到babel@7.

要升级的有一大堆，升级以后各种问题暴露出来的解决方法：

Cannot assign to read only property ‘exports’ of object

解决办法：在babel.config.js中

module.exports = {
  sourceType:'unambiguous'
}

原因是import和module.exports在项目中混用导致的。

babel-loader

记得配置exclude: /node_modules/和 cacheDirectory

webpack升级变化

contentBase

devServer: {
    contentBase: path.join(__dirname, './dist'),
}

改为：

devServer: {
    static: {
        directory: path.resolve(__dirname, './dist'),
    },
}

项目热更新失败

在每次修改代码时，总是会刷新页面。在控制带选择Preserve log后，才看到如下日志。

[HMR] Cannot apply update. Need to do a full reload! 
[HMR] Error: Aborted because Qs22 is not accepted

经过升级webpack，移除react-hot-loader后，将原来的代码

if (module.hot) {
module.    hot.accept('@/router', () => {
        const NextApp = require('@/router').default;
        renderWithHotReload(NextApp);
    });
}

改为

if (hot) {
    hot.accept();
}

后生效。不用reload，即可看到页面变化。

最终项目正常运行时，babel的配置

.babelrc

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ],
    "sourceType": "unambiguous",
    "plugins": [
        ["styled-jsx/babel", { "optimizeForSpeed": true }],
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-transform-modules-commonjs",
        ["@babel/plugin-transform-spread",{"loose": true}],
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
}

package.json

"devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/plugin-proposal-decorators": "^7.19.6",
    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/plugin-transform-spread": "^7.19.0",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
}