Web

虽然，我们在上一步已经可以看到React组件在页面上显示，下面还需要针对一个真实的Web项目的需求做更多的配置。

CSS/SASS Loader

如果你仍然习惯于将样式写在CSS/SASS中（而不是JavaScript中），此时可能会需要：Webpack CSS Loader 或 Webpack SASS Loader。

以SASS Loader为例：

yarn add sass-loader css-loader style-loader --dev

修改webpack.config.js：

module: {
  rules: [
    ...
    {
      test: /\.scss$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader",
        options: { modules: true, localIdentName: '[path][name]__[local]--[hash:base64:5]' }
      }, {
        loader: "sass-loader"
      }]
    }
  ]
},

这里应用了CSS-Loader提供的CSS Modules特性，能够在编译的时候自动的给CSS类名提供适当的命名空间（前缀），关于CSS Modules的更多细节，请查看 CSS Modules。

修改目录结构，我们将之前写在app/index.js中的HelloMessage组件移动到/app/components/HelloMessage/目录下，如下：

.
├── README.md
├── app
│   ├── components
│   │   └── HelloMessage
│   │       ├── index.jsx
│   │       └── styles.scss
│   ├── index.html
│   └── index.js
├── dist
│   ├── app.bundle.js
│   └── index.html
├── node_modules
├── package.json
├── webpack.config.js
└── yarn.lock

/app/components/HelloMessage/index.jsx

import React from 'react';
import styles from './styles.scss';

class HelloMessage extends React.Component {
  render() {
    return <div className={styles.red}>Hello, {this.props.message}</div>;
  }
}

export default HelloMessage;

./styles.scss

.red {
  color: red;
}

修改app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloMessage from './components/HelloMessage';

ReactDOM.render(<HelloMessage message="My First React App" />, document.getElementById('app'));

还没结束，因为这里是这样引入组件的import HelloMessage from './components/HelloMessage';省略了index.jsx，我们还需给webpack添加一点配置：

const config = {
    ...
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
}

可以帮助自动解析对应的扩展名，更详细的解释，请查看resolve-extensions。

完成以上修改之后，就可以看到样式应用到DOM上，此时，可以查看（Inspect）一下元素，可以看到对应的编译之后的class名。

File Loader

除了样式，我们还需要处理一系列的assets，比如：图片资源，字体资源，所以你需要File Loader：

yarn add file-loader --dev

webpack.config.js

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    'file-loader'
  ]
}

.red {
    color: red;
}

.logo {
    background-image: url("./logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 22px;
    width: 22px;
    display: inline-block;
    vertical-align: middle;
}

logo.svg下载

import React from 'react';
import styles from './styles.scss';

class HelloMessage extends React.Component {
  render() {
    return (<div className={styles.red}>Hello, {this.props.message}<div className={styles.logo}></div></div>);
  }
}

export default HelloMessage;

File Loader会配合CSS Loader将样式中定义的url('./logo.svg')拷贝到dist目录。

Normalize.css

为了保证浏览器的样式一致性，我这里引入了Normalize.css。首先需要添加css-loader：

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
  ]
},

import React from 'react';
import ReactDOM from 'react-dom';
import HelloMessage from './components/HelloMessage';
import 'normalize.css';

ReactDOM.render(<HelloMessage message="My First React App" />, document.getElementById('app'));

当然，也可以单独在HTML中引入。

PostCSS

什么是PostCSS，我们要使用到PostCSS-Loader。

webpack.config.js

{
  test: /\.scss$/,
  use: [{
    loader: "style-loader"
  }, {
    loader: "css-loader",
    options: { modules: true, localIdentName: '[path][name]__[local]--[hash:base64:5]' }
  }, {
    loader: "postcss-loader"
  }, {
    loader: "sass-loader"
  }]
},

./postcss.config.js

module.exports = {
   plugins: [
      require('autoprefixer')
   ]
};

它的作用是：

:fullscreen {}

//输出如下

:-webkit-:full-screen {}
:-moz-:full-screen {}
:full-screen {}

代码

你可以在prepare-env分支查看到当前步骤所有的代码

git clone [email protected]:ThoughtWorksWuhanUI/react-zero-to-one.git
git checkout prepare-env

本页编辑：Benwei