轻骑兵前端环境个人问题以及解决方法汇总

1 ?. 无法识别
2 找不到 xxxDrawer
3 eslint 报错
4 LayoutCore is not defined

?. 无法识别

?. 的学名是 可选链操作符，是ES2020的新特性。

首先是 nodejs 版本的问题，推荐 16.13.0 或者更新的版本（大版本不一定比小版本新）。

具体请看 https://node.green/#ES2020-features-optional-chaining-operator-----

这个问题解决办发分换包和不换包的。换包的方法就是在 front 根目录 执行 yarn 就可以了。

不换包的方法麻烦一点，需要改代码。

观察一下报错，发现报错都是在 node_modules 里面，而且都是 js 文件。也就是说，其实是babel-loader没有到执行到这里面的js文件，按道理应该是能执行到的，因为 BuildEnvironment 里面有 babel.config.js。那么我们需要在 BuildEnvironment 里面的 vue.config.js补一些配置。注意改这个文件夹一般是需要重启项目的。

// vue.config.js
module.exports = {
// 前面略
chainWebpack(config) {
    // 前面略
    // NEW //////////////////////////////////////////
    config.module
      .rule('babel')
      .test(/\.js$/)
      .include.add(resolve(__dirname, '../node_modules/xxxComponent'))  // 这里是举个例子，实际上不止一个模块要改
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: '@vue/cli-plugin-babel/preset',
        plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
      })
      .end();
    // NEW //////////////////////////////////////////
  },
}

webpack loader规则的经典写法是对象数组，chainWebpack 里面是函数试的写法。最好看一下 webpack 文档，因为这个写法和原来的不是完全对应的，有些关键字改了。

找不到 xxxDrawer

这个是因为改了 xxxkj-base-ui-component 之后没有执行脚本更新样板代码，执行一下就好了。

进入这个文件夹，执行 npm run generate 。

eslint 报错

把BuildEnvironment里面的eslint关掉就可以了。

// vue.config.js
module.exports = {
// 前面略
lintOnSave: false
}

LayoutCore is not defined

还是BuildEnvironment里面。把 module.exports.configureWebpack.config.externals 里面的 LayoutCore 注释掉。

module.exports = {
	// 前面略
    configureWebpack: (config) => {
        config.externals = {
              vue: 'Vue'
              // LayoutCore: 'LayoutCore',  // 这句话注释掉
        };
        // 后面略
    }
}