最近工作中需要一个问题，非常有必要总结一下，万一有碰到这个问题的同学可以参考。
原本使用create-react-app脚手架搭建的项目突然被告知要能在浏览器中直接访问到node中的模块……（这个模块叫winax），从而中途改换create-nw-react-app这个脚手架，因其基于create-react-app同时又有nw环境，问题猜想应该能得到解决。但实际情况并非如此。
首先是引入antd，antd的官网提供的按需加载的引入方式可以使用。为方便后面修改主题，我使用了react-app-rewired插件通过config-overrides.js的方式引入，同时使用react-app-rewire-less插件通过modifyVars修改less中的变量。
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
config
);
config = rewireLess.withLoaderOptions({
modifyVars: {
"@primary-color": "#06c082",
"@font-size-base": "12px"
},
})(config, env);
return config;
};
这个过程中要注意的是:
1、babel-plugin-import是不会默认安装，所以你需要自己安装
2、package.json中的start脚本需要修改成react-app-rewired start
但是react-app-rewired启动配置start.js脚本的时候，paths.js中的默认的scriptVersion是“react-scripts”，而不是能启动nw的nw-react-script，这是需要修改的一个地方
const scriptVersion = custom_scripts || 'react-scripts';
=> const scriptVersion = custom_scripts || 'nw-react-scripts';
另一个是webpack.config.dev.js中的host地址默认是“0.0.0.0”，这样的话nw会修改成“chrome-extension://.......:3000”，显然你想访问的“http://localhost:3000”就访问不到了。那么将这个“0.0.0.0”修改成“localhost”即可
const host = process.env.HOST || '0.0.0.0';
=> const host = process.env.HOST || 'localhost';
接下来你可以在项目中新建一个js，通过node的fs模块修改上述讲到的地方，在npm start之前先运行一下这个脚本，然后再npm start，最终你才正常启动nw，看到正常的修改过主题的antd。当然关于nw的配置请参考官网。