美文网首页React常用知识
react 脚手架create-react-app快速配置开发

react 脚手架create-react-app快速配置开发

作者: 热心程序猿黄帅哥 | 来源:发表于2018-08-24 20:52 被阅读133次

    1、创建脚手架 create-react-app:

        ①命令行执行:npm install -g create-react-app 安装脚手架工具;

        ②命令行执行: create-react-app xxx  执行创建一个新的项目(xxx为项目根目录名称);

        ③ 命令行执行: cd xxx  跳转到刚刚创建的项目目录下;

        ④命令行执行: npm start  开启热加载 在localhost:3000中运行本地开发环境;

        ⑤命令行执行: npm run build  启动内置已配好的webpack压缩js、jsx、less、css等文件启动线上环境。(该步骤在本地测试开发环境完成后)。

    2、中间可能会遇到的问题:

        ①线上环境路径出现错误: 

        解决办法:在package.json中加上"homepage": ".",如图1箭头所示。

    图1

        ②打包过后css\js文件都存在后缀 .map 的文件,使压缩后的文件过大:

         解决办法:在node_modules文件夹里的react-scripts 里找到webpack.config.prod.js文件,将devtool改为false即可,如图2所示。

    图2

    3、安装antd以及按需加载所需依赖:

        npm  i    antd      react-app-rewired   react-app-rewire-less  babel-plugin-import ;

                    组件包           更改启动               使用less                        组件按需加载

        修改package.json  如图:

    "scripts": {

        "start": "react-app-rewired start",

        "build": "react-app-rewired build",

        "test": "react-app-rewired test --env=jsdom",

        "eject": "react-scripts eject"

      }

    package.json

    在根目录下创建  config-overrides.js 文件 ,内容如下:

    const { injectBabelPlugin } = require('react-app-rewired');

    const rewireLess = require('react-app-rewire-less');

    module.exports = function override(config, env) {

        config = injectBabelPlugin(

            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less

            config,

        );

        config = rewireLess.withLoaderOptions({

            modifyVars: { "@primary-color": "#1DA57A" },

            javascriptEnabled: true,

        })(config, env);

        return config;

    };

    新建文件配置

    相关文章

      网友评论

        本文标题:react 脚手架create-react-app快速配置开发

        本文链接:https://www.haomeiwen.com/subject/vpbiiftx.html