create-react-app中配置less和mobx

☼ 注：笔者的文章是根据自己当前项目做的笔记，具体应用请参照自己实际项目情况

配置less

1、执行以下命令

git init
git add .
git commit -m 'xxx'
npm run eject
cnpm i less less-loader -D

*更正：loader是开发环境时用到的，所以一般-D就行了，不需要-S
2、在webpack.config.dev.js和webpack.config.prod.js中添加以下代码块（对应位置参照sass的配置）

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders({ importLoaders: 2}, 'sass-loader'),
},

{
    test: lessModuleRegex,
    use: getStyleLoaders(
       {
          importLoaders: 2,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
       'less-loader'
     ),
 },

配置mobx

1、执行以下命令

git init
git add .
git commit -m 'xxx'
npm run eject
cnpm i --save-dev babel-plugin-transform-decorators-legacy
cnpm i @bable/plugin-proposal-decorators --save
cnpm i mobx --save
cnpm i mobx-react --save

2、配置package.json

"babel": {
  "presets": ["react-app"],
  "plugins": [
    ['@babel/plugin-proposal-decorators', { "legacy": true }],
    ['@babel/plugin-proposal-class-properties',{'loose':true}]
  ]
}

☆或者在webpack.config.dev.js和webpack.config.prod.js中配置"plugins"部分（推荐）

//在oneOf中找到customize，在下方的plugins中添加
['@babel/plugin-proposal-decorators', { "legacy": true }],
['@babel/plugin-proposal-class-properties',{'loose':true}],

3、在项目根目录下新建一个jsconfig.json文件，消除vscode装饰器语法报错提示

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

☆或者在settings.json中修改设置

"javascript.implicitProjectConfig.experimentalDecorators": true