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相关的技术，以求进步。

第一期系列文章主要内容有： react的基本环境搭建、路由配置与组建分割、前后端数据交互、状态管理(mobx)、react应用部署以及同构。

第一期系列文章主要记录的是我搭建react的种子项目react-sail的过程。如果你觉得对你有些帮助的话，给react-sail个start吧，有兴趣的朋友可以一起来完善。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!