基于create-react-app的初始化项目

在开发项目中，经常需要根据项目私人订制一些技术栈进入项目，本文将分享一些常用的技术栈植入create-react-app和一些常用的配置方案

初始化项目

create-react-app react-init
cd react-init
npm run eject

创建项目并且抽出配置项，以下为react和webpack版本

• react v16.4.0
• webpack v3.8.1

1. 配置scss

npm install sass-loader node-sass --save-dev

修改config/webpack.config.dev.js

{
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss/],
  loader: require.resolve('file-loader'),
  options: {
       name: 'static/media/[name].[hash:8].[ext]',
  },
},
{
   test:/\.scss$/,
   loaders:['style-loader','css-loader','sass-loader']
}

修改config/webpack.config/dev.js

{
  test: /\.(css|scss)$/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
        loader: require.resolve('style-loader'),
        options: {
          hmr: false,
        },
      },
      use: [
        {
          loader: require.resolve('css-loader'),
          options: {
          importLoaders: 1,
          minimize: true,
          sourceMap: shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            ident: 'postcss',
            plugins: () => [
            require('postcss-flexbugs-fixes'),
              autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
              }),
            ],
          },
        },
        require.resolve("sass-loader") //less-loader配置，数组loader需要倒着加载
      ],
    },
    extractTextPluginOptions
    )
  ),
},
{
  loader: require.resolve('file-loader'),
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss/],
  options: {
    name: 'static/media/[name].[ext]',
  },
},
{
  test:/\.scss$/,
  loaders:['style-loader','css-loader','sass-loader']
}

配置完成，之后在项目中直接import scss文件即可

2. 分离测试环境生产环境配置

通常一个项目会有测试环境和生产环境的存在，甚至还会存在一个预发布环境，最开始每次发布不同的环境都要修改不同的基础配置，完全处于手动状态，这其实是一个很糟糕的开发体验

1. 关于全局配置
   查看config/env.js

{
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl
}

这个字面量对象可以被业务代码通过process.env获取，我们的环境变量配置也主要依赖于这个字面量对象，在这里我们定义BUILD_PROD作为判断测试和生产环境的标志，修改后配置项如下

{
        NODE_ENV: process.env.NODE_ENV || 'development',
        PUBLIC_URL: publicUrl,
        BUILD_PROD: process.env.BUILD_PROD || false
}

2. 自定义脚本
   查看scripts/build.js，修改build.js为build-test.js，之后复制build-test.js重命名为build-prod.js，修改build-prod.js

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
process.env.BUILD_PROD = true;

3. 修改package.json

"scripts": {
    "start": "node scripts/start.js",
    "build-test": "node scripts/build-test.js",
    "build-prod": "node scripts/build-prod.js",
    "test": "node scripts/test.js --env=jsdom"
}

关于测试和生产环境的配置项通过process.env.BUILD_PROD判断