@artworks/customize-cra v2.0.2

@artworks/customize-cra

📌📌 @artworks/customize-cra 是基于公司业务情况根据 customize-cra 做的定制化扩展，使用方式同 customize-cra API

• 如何使用
• 总览
• 使用
• 文档

如何使用

这个项目依赖于 react-app-rewired. 使用此包前请先确认react-app-rewired安装.

yarn add @artworks/customize-cra

总览

@artworks/customize-cra利用react-app-rewired的config-overrides.js文件。通过导入@artworks/customize-cra功能和出口几个函数调用包在我们的override功能，你可以很容易地修改底层配置对象（webpack，webpack-dev-server，babel等）组成create-react-app.

用法

注意 所有代码应添加到config-overrides.js与相同的级别package.json.

有关每个函数的文档，请参见api文档.

示例:

const {
  artOverrideWebpack,
  artOverrideDevServer,
  artOverridePaths,
} = require('@artworks/customize-cra');
const path=require("path")

module.exports = {
  webpack: artOverrideWebpack(),
  devServer: artOverrideDevServer(),
  paths: artOverridePaths(),
};

注意 artOverrideWebpack内置了对多页面、别名、less语法的支持

文档

@artworks/customize-cra具有customize-cra如下所列的所有API

• customizers

  • addTslintLoader
  • addExternalBabelPlugin
  • addExternalBabelPlugins
  • addBabelPlugin
  • addBabelPlugins
  • addBabelPreset
  • addBabelPresets
  • babelInclude
  • babelExclude
  • removeInternalBabelPlugin
  • fixBabelImports
  • addDecoratorsLegacy
  • useBabelRc
  • disableEsLint
  • useEslintRc
  • enableEslintTypescript
  • addWebpackAlias
  • addWebpackResolve
  • addWebpackPlugin
  • addWebpackExternals
  • addWebpackModuleRule
  • setWebpackTarget
  • setWebpackStats
  • addBundleVisualizer
  • setWebpackOptimizationSplitChunks
  • adjustWorkbox
  • addLessLoader
  • addPostcssPlugins
  • disableChunk
  • removeModuleScopePlugin
  • watchAll
  • adjustStyleLoaders

• utilities

  • getBabelLoader
  • tap

在此基础上扩展的方法如下:

• paths
  • clearAppIndexJs
  • artOverridePaths

• devServer

  • artOverrideDevServer
  • proxy

• webpack

  • multipleEntry
  • polyfill
  • addWebpackAliasByTsConfig
  • optimization
  • forkTsChecker
  • artOverrideWebpack

• resolveApp

paths

paths是编译react应用用于开发或生产环境的路径配置。有如下几个值：

• dotenv: 当前项目下.env文件路径
• appPath: 当前项目目录路径
• appBuild:当前项目打包文件路径
• appPublic: 当前项目public文件夹路径地址
• appHtml: 当前项目html模板文件路径地址，默认public/index.html
• appIndexJs: 当前项目入口文件路径地址，默认src/index
• appPackageJson:当前项目package.json文件路径地址
• appSrc: 当前项目源码文件夹路径地址，默认src
• appTsConfig:当前项目tsconfig.json文件路径地址
• appJsConfig: 当前项目jsconfig.json文件路径地址
• yarnLockFile: 当前项目yarn.lock文件路径地址
• proxySetup: 当前项目代理路径地址，默认src/setupProxy.js
• appNodeModules: 当前项目node_modules文件夹路径地址，默认node_modules
• publicUrlOrPath：项目打包后资源url地址 ,默认/

以上地址可以在config-overrides.js中修改

// config-overrides.js
const path = require('path');

module.exports = {
  paths: function(paths, env) {
    paths.appIndexJs=path.join(__dirname, './src/app.ts')
    return paths;
  },
}

使用 @artworks/customize-cra 方式修改如下:

// config-overrides.js
const {override,resolveApp} = require('@artworks/customize-cra');

module.exports = {
  paths: override(config => {
    paths.appIndexJs =resolveApp('./src/app.ts');
    return paths;
  }),
};

clearAppIndexJs

清除 paths下的appIndexJs路径设置，规避react-scripts对此路径的检查。多页面情况下使用此方法

artOverridePaths

对override方法的扩展，添加了clearAppIndexJs方法的默认设置 等于

// config-overrides.js
const {override,clearAppIndexJs} = require('@artworks/customize-cra');

module.exports = {
  paths: override(
      clearAppIndexJs(),
    ),
};

devServer

devServer是启动服务时的webpack配置

以上地址可以在config-overrides.js中修改

// config-overrides.js
const path = require('path');

module.exports = {
  devServer: function(configFunction) {
   return function(proxy, allowedHost) {
      // Create the default config by calling configFunction with the proxy/allowedHost parameters
      const config = configFunction(proxy, allowedHost);

      // Change the https certificate options to match your certificate, using the .env file to
      // set the file paths & passphrase.
      const fs = require('fs');
      config.https = {
        key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
        cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
        ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
        passphrase: process.env.REACT_HTTPS_PASS
      };

      // Return your customised Webpack Development Server config.
      return config;
    };
  },
}

artOverrideDevServer

对override方法的扩展，添加了watchAll方法的默认设置 等于

// config-overrides.js
const {override,watchAll} = require('@artworks/customize-cra');

module.exports = {
  devServer: override(
      watchAll(),
    ),
};

proxy

代理设置 proxy(param)

param 具体参数规则可参看webpack [proxy API)https://v4.webpack.docschina.org/configuration/dev-server/#devserverproxy

// config-overrides.js
const {proxy,override,artOverrideDevServer} = require('@artworks/customize-cra');
module.exports = {
  devServer: override(proxy({
  '/api': 'http://localhost:3000'
  })),
  // 或 
  // devServer: artOverrideDevServer(proxy({
  // '/api': 'http://localhost:3000'
  // })),
};

webpack

webpack是对项目运行的webpack配置调整

multipleEntry

多页面入口支持 multipleEntry(entrys|null) 其中 entrys为数组格式如下

[
    {
        name:'index', 
        entry: 'src/apps/home/index.ts',//入口名称
        template: 'public/index.html', 
        outPath: '/home.html' 
    }
]

其中

• name：模块名称不可重复
• entry： 入口文件地址
• template: html模板地址
• outPath： 输出html页面

如果 entrys 值为空，则自动读取 src/apps目录下文件，智能生成入口文件配置. 自动读取文件配置对目录要求如下:

  根目录 
  ├─src              //开发目录
  |   ├─apps         //业务开发app目录，分登录页和首页。采用
  |   |   ├─index //index.html 页面根目录 
  |   |   |   ├─index.ts     //入口文件也可为index.tsx
  |   |   |   ├─index.html     //当前页面html模板
  |   |   ├─login //├─login.html 页面根目录 
  |   |   |   ├─index.ts     //入口文件也可为index.tsx
  |   |   |   ├─index.html     //当前页面html模板
  ...

注意 启动多页面配置时请使用clearAppIndexJs来规避react-scripts对入口文件的检查

使用示例如下:

// config-overrides.js
const {override,clearAppIndexJs,multipleEntry} = require('@artworks/customize-cra');

module.exports = {
  paths: override(
      clearAppIndexJs(),
    ),
  webpack: override(
      multipleEntry([{
          name:'index',
          entry: 'src/apps/home/index.ts',
          template: 'public/index.html',
          outPath: '/home.html' 
    }]),
    ),
};

polyfill

适用于各种浏览器的polyfill，默认支持IE9+

polyfill 使用示例

// config-overrides.js
const {override,polyfill} = require('@artworks/customize-cra');

module.exports = {
  webpack: override(
      polyfill(),
    ),
};

其中 polyfill默认导入支持ie9的polyfill

polyfill() 等于 polyfill('react-app-polyfill/ie9','react-app-polyfill/stable')

addWebpackAliasByTsConfig

读取tsconfig中别名配置，直接作为webpack的别名设置 tsconfig.json 示例如下

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@common/*": ["src/common/*"],
      "@interfaces": ["src/typings/interfaces.d.ts"],
      "@assets": ["src/typings/interfaces.d.ts"]
    }
  }
}

addWebpackAliasByTsConfig 使用示例

// config-overrides.js
const {override,addWebpackAliasByTsConfig} = require('@artworks/customize-cra');

module.exports = {
  webpack: override(
      addWebpackAliasByTsConfig(),
    ),
};

optimization

webpack优化，将react\react-dom 提取成一个公共包.

optimization(packages)

packages为一个包名称数组如:"react","react-dom"

optimization 使用示例

// config-overrides.js
const {override,optimization} = require('@artworks/customize-cra');

module.exports = {
  webpack: override(
      optimization(["react","react-dom"]),
    ),
};

forkTsChecker

去除ts语法检查

// config-overrides.js
const {override,forkTsChecker} = require('@artworks/customize-cra');

module.exports = {
  webpack: override(
      forkTsChecker(),
    ),
};

artOverrideWebpack

对override方法的扩展，添加了addWebpackAliasByTsConfig,multipleEntry,babelInclude,addLessLoader方法的默认设置 等于

// config-overrides.js
const {override,addWebpackAliasByTsConfig,multipleEntry,babelInclude,addLessLoader} = require('@artworks/customize-cra');

module.exports = {
  webpack: override(
    addWebpackAliasByTsConfig(),
    multipleEntry(), 
    //https://github.com/arackaf/customize-cra/blob/HEAD/api.md#removemodulescopeplugin
    removeModuleScopePlugin(),
    // https://github.com/arackaf/customize-cra/blob/HEAD/api.md#babelinclude
    babelInclude([
      resolveApp("./node_modules/antd"),
      resolveApp("./src"),
    ]),
    addLessLoader({
      javascriptEnabled:true,
    }),
    ),
};