你的位置:首页 > Java教程

[Java教程]如何利用Facebook的create

引言:

  create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目。

 

  通常我们开始做一个react web或者 app 项目的时候,都会自己利用 npm 或者 yarn 安装项目所需要的一些依赖,再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码。

  现在,如果你想要搭建一个完整的 react 项目环境,已经不需要自己动手布置许许多多的东西,利用 create-react-app 工具,就能轻松帮你配置好一个 react 项目。

 

全局安装 create-react-app

1 npm i create-react-app -g
View Code

 

 

创建一个应用程序

1 create-react-app ProjectName
View Code

 

然后你可以看到创建完之后的目录结构

my-app/ --README.md --node_modules/ --package.json --.gitignore --public/ -----favicon.ico -----index.html --src/ -----App.css -----App.js -----App.test.js -----index.css -----index.js -----logo.svg 

你会发现在整个项目文件夹中,并没有 webpack.config.js 文件,这时候你只需要在项目目录中执行 npm run eject 命令,你会看到他提示你 Are you sure you want to eject? This is permanent. 输入y 然后回车,打开项目文件夹你会发现多了两个目录( public 、 scripts),像这样:

 

 试着运行一下项目,输入 npm run start 回车,浏览器会自动打开一个地址为  的页面,端口号为3000.

 

到这里,一个react项目基本上已经搭建完成了,现在我们为项目引入 ant design mobile 框架。

使用yarn安装: yarn add antd-mobile使用npm安装: npm install antd-mobile -D

 

安装其他的一些开发依赖

yarn add --dev babel-plugin-import svg-sprite-loader@0.3.1 less less-loader postcss-pxtorem

 

接下来是项目的配置: 

  打开 config 文件夹中的 webpack.config.dev.js 文件,在 webpack.config.dev.js 中找到 exclude 追加两行代码,用于加载 less 和 svg 文件

module.exports = { module: {  rules: [   ...   {    exclude: [     /\.html$/,     /\.js$/,     /\.json$/,     /\.less$/,//追加     /\.svg$/,//追加    ],    ...   }  ] }}

 

添加按需加载文件处理插件

 

module.exports = { module: {  rules: [   {    test: /\.(js|jsx)$/,    ...    options: {     //追加     plugins: [     ['import', { libraryName: 'antd-mobile', style: true }],     ],     ...    },    },  ] }}

 

 

添加svg处理

 

module.exports = { module: {  rules: [   ...   {    test: /\.(svg)$/i,    loader: 'svg-sprite-loader',    include: [     require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile使用的svg目录     path.resolve(__dirname, '../src/'), // 个人的svg文件目录,如果自己有svg需要在这里配置    ]    },   ...  ] }}

 

 

添加less处理

 

module.exports = { module: {  rules: [   ...    {    test: /\.less$/,    use: [     require.resolve('style-loader'),     require.resolve('css-loader'),     {     loader: require.resolve('postcss-loader'),     options: {      ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options      plugins: () => [      autoprefixer({       browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],      }),      pxtorem({ rootValue: 100, propWhiteList: [] })      ],     },     },     {     loader: require.resolve('less-loader'),     options: {      modifyVars: { "@primary-color": "#1DA57A" },     },     },    ],    }   ...  ] }}

 

 

在此之前必须要引入 postcss-pxtorem 模块,用于px转rem

 

const pxtorem = require('postcss-pxtorem');

 

重新启动项目,但是你会发现react的Logo没了。此时就轮到 antd-mobile 闪亮登场了。 

  在 src/App.js 中导入antd-mobileIcon,代码如下:

  

import React, { Component } from 'react';import {Icon} from 'antd-mobile';import logo from './logo.svg';import './App.css';class App extends Component { render() { return (  <div className="App">  <div className="App-header">   <Icon type={logo} />   <h2>Welcome to React</h2>  </div>  <p className="App-intro">   To get started, edit <code>src/App.js</code> and save to reload.  </p>  </div> ); }}export default App;

 

最后是使用antd-mobile提供的高清解决方案,你可以参考官方文档或者按照以下步骤:

  1.   下载未压缩的 viewport.js 或者在压缩版的 viewport.min.js
  2.   在 public 目录下的 index.html 中引入下载好的js,请内联写到所有 css 引用之前, 否则部分安卓机有问题,并且不要再设置meta标签的viewport
  3.   打开config/webpack.config.dev.js,新增一句代码
{  test: /\.css$/,  use: [   require.resolve('style-loader'), {    loader: require.resolve('css-loader'),    options: {     importLoaders: 1,    }   }, {    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',      }),      pxtorem({ rootValue: 100, propWhiteList: [] }) //新增     ],    },   },  ], },

 

重启项目,你会发现css单位由px转为了rem。