使用antd-mobile构建项目

原创
2018/05/27 18:40
阅读数 160

安装node.js 安装cnpm或者设置淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

使用 create-react-app 快速构建 React 开发环境

$ cnpm install -g create-react-app

创建项目

$ create-react-app my-app
$ cd my-app/
$ npm start

停止服务器,并配置项目 安装antd-mobile依赖

$ cnpm install antd-mobile --save

上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。 此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。

引入 react-app-rewired 并修改 package.json 里的启动配置。

$ cnpm install react-app-rewired --dev

修改package.json 里的启动配置(+,-表示增加行,删除行)


/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
};

使用 babel-plugin-import#

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。

$ cnpm install babel-plugin-import --dev

新建并修改 config-overrides.js 文件。

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
};

最后重启 npm start 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部