package.json文件详解

package.json是什么？

Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。

使用的是Facebook推出的creat-react-app  （antd官网有文档）
react-app-rewired2.x以后，不再支持injectBabelPlugin的方式，需要安装customize-cra。

1.首先 我们按照react-app-rewired

yarn add react-app-rewired

2.修改package.json中的文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

接着 安装 customize-cra

yarn add customize-cra

然后在根目录下添加config-overrides.js文件。

module.exports = function override(config, env) {
  // 关于webpack的相关配置
  return config;
};

基本的操作就是这样。下面我们再来说具体到我们的项目中，需要做的一些配置。

1、react项目中我们最常用的组件库antd，我们需要配置按需加载。

使用babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。

安装

 yarn add babel-plugin-import

接着配置webpack 

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

这样我们在组件中就可以按需引入组件库中所需要的组件了。

2、自定义主题

按照配置主题的要求，自定义主题需要用到 less 变量覆盖功能。

安装less和less-loader

yarn add less less-loader

配置webpack

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

这里利用了less-loader的modifyVars来进行主题配置。当然这里的modifyVars的值也可以是一个theme文件。

3、打包后我们会发现静态文件夹中会有很多的css和js的map文件，那么我们该怎么关闭sourcemap呢？

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

ok，再次执行npm run build便不会产生map文件了。

还看到一种解决的方式如下

const rewiredMap = () => config => {
    config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    return config;
};

module.exports = override(
    // 关闭mapSource
    rewiredMap()
);

参考地址：https://segmentfault.com/q/10100000181231940

4、支持装饰器

const { override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override(
    addDecoratorsLegacy()
);

cross-env脚本  -- 运行跨平台设置和使用环境变量的脚本

 为什么使用？

当您使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。 （异常是Windows上的Bash，它使用本机Bash。）同样，Windows和POSIX命令如何使用环境变量也有区别。 使用POSIX，您可以使用：$ ENV_VAR和使用％ENV_VAR％的Windows。
简单概括：windows不支持NODE_ENV=development的设置方式

 windows不支持NODE_ENV=development的设置方式。

cross-env使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量。 只要在POSIX系统上运行就可以设置好，而cross-env将会正确地设置它。
这个迷你的包(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。