react揚帆起航之基本環境搭建

create-react-app-typescript

自從使用了Angular以後，今後入了Typescript的坑。當再次選擇react時，就選擇了基於react官方腳手架構建工具create-react-app的ts實現，即create-react-app-typescript。

使用起來很是簡單，幾個命令便可:

# create-react-app
npm i -g create-react-app
# 構建項目
create-react-app react-example --scripts-version=react-scripts-ts
# 啓動
cd react-example
npm start

OK, done!

react-app-rewired

react-app-rewired是一個對create-react-app進行自定義配置的社區解決方案，能夠在不 eject 的情條件下對create-react-app進行高級配置。

npm i react-app-rewired -D

而後在package.json更改啓動配置，更改成：

/* package.json */
"scripts": {
  "start": "react-app-rewired start --scripts-version react-scripts-ts",
  "build": "react-app-rewired build --scripts-version react-scripts-ts",
  "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
}

而後在項目的根目錄在建立 config-overrides.js，在這裏，經過配置實現如下功能：

• antd按需加載以及自定義主題
• 支持less並實現less-modules
• 低版本瀏覽器自動添加css前綴

// config-overrides.js
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
const rewireLess = require('react-app-rewire-less');
const fs = require('fs');
const path = require('path');

module.exports = function override(config, env) {

  const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.loader &&
      typeof rule.loader === 'string' &&
      rule.loader.includes('ts-loader')
  );

  // ts-import-plugin
  tsLoader.options = {
    getCustomTransformers: () => ({
      before: [tsImportPluginFactory({
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'true',
      })]
    })
  };

  // antd自定義主題
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
  })(config, env);

  // less-modules/自動添加css前綴
  config.module.rules[1].oneOf.unshift(
    {
      test: /\.less$/,
      exclude: /node_modules|antd\.less/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            minimize: true,
            modules: true,
            localIdentName: '[local]___[hash:base64:5]'
          }
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9'
                ],
                flexbox: 'no-2009'
              })
            ]
          }
        },
        {
          loader: require.resolve('less-loader')
        }
      ]
    }
  );

  return config;
}

至此，關於基本環境搭建的內容完畢。

---

react揚帆啓航專欄分享的時我我的學習與實踐react過程當中的一些歷程，但願藉此專欄與你們共同探討react相關的技術，以求進步。