在开发项目中，经常需要根据项目私人订制一些技术栈进入项目，本文将分享一些常用的技术栈植入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. 分离测试环境生产环境配置
通常一个项目会有测试环境和生产环境的存在，甚至还会存在一个预发布环境，最开始每次发布不同的环境都要修改不同的基础配置，完全处于手动状态，这其实是一个很糟糕的开发体验
- 关于全局配置
查看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
}
- 自定义脚本
查看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;
- 修改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判断
