使用Create-React-App脚手架搭建antd-mobile的开发环境

在本文撰写之时,按照官方在线文档https://mobile.ant.design/docs/react/use-with-create-react-app-cn的步骤搭建antd-mobile的环境,CSS样式无法生效。研究了一下,特此做一个记录,希望能帮助到更多的人。

第一步:安装官方脚手架 create-react-app,命令如下,mac系统下安装的自行在npm前添加$即可.

npm install -g create-react-app

建议使用淘宝镜像安装,速度会更快一些命令如下:

cnpm install -g create-react-app

安装好后,就可以用如下命令建立你的react应用了,其中的myshop是你自己取的项目名称

create-react-app myshop

有不少同学在进行此步骤来创建一个新的React应用时由于某原因,在拉取各种资源过程中往往会巨慢,这里提出一个解决办法,就是将下载资源的地址永久设置为淘宝的镜像。

npm config set registry https://registry.npm.taobao.org

然后我们在验证一下

npm config get registry

--或 npm info express

这样设置后,在运行create-react-app命令建立项目 ,你会发现快了好多,而且通常情况下都能顺利完成;

之后进入项目文件夹的根目录,启动项目,命令行如下:

cd myshop

npm start

此时,通常会自动启动浏览器,命令窗口显示:

Compiled successfully!

You can now view myshop in the browser.

  Local:            http://localhost:3000/

  On Your Network:  http://192.168.0.132:3000/

Note that the development build is not optimized.

To create a production build, use npm run build.

通过浏览器访问http://localhost:3000/或 http://192.168.0.132:3000/应该可以看到欢迎画面了,进行到这里说明通过Create-React-App脚手架创建的项目成功启动!

打开编辑器,笔者使用的Atom,此时目录结构为下图所示:

我新建的项目myshop的目录结构

自己配置过webpack的同学可能会发现,“好像少点什么?”,create-react-app脚手架工具对webpack配置文件进行了隐藏,为了能够顺利的搭建antd-mobile,我们需要让配置文件“显示出来”,命令如下:

npm run eject

小提示:运行前您可能需要按CTRL+C退出启动的项目

运行后,发现它会执行一系列安装..出现如下结果说明成功完成:

Running npm install...

added 117 packages and updated 1 package in 14.894s

Ejected successfully!

Please consider sharing why you ejected in this survey:

http://goo.gl/forms/Bi6CZjk1EqsdelXk1

这时,我们发现多了一个项目文件夹,config,具体如下:


npm run eject执行后项目中多出了一个叫config的文件夹

为了阅读这篇文章的同学后面少些坑,我们顺手解决下打包路径的问题。用create-react-app脚手架搭建的react项目使用 npm run build 之后生成的打包文件只能在根目录访问,这样放在服务器目录就访问不到了,为了你们不要和我一样打包后在哭着百度解决方案,在这里一并放出:

config文件夹下面找到paths.js文件,打开后大约在34~39行前后有如下代码:

function getServedPath(appPackageJson) {

  const publicUrl = getPublicUrl(appPackageJson);

  const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');

  return ensureSlash(servedUrl, true);

}

将这句修改为:(仔细看,最后面的"/"前面加了一个".")

const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');

下面进行LESS CSS预处理器配置,antd-mobile依赖LESS模块,不安装和配置好,样式是不会起作用的,在项目根目录运行如下命令:

cnpm install less less-loader --save-dev

这里面注意下 less 和 less-loader 都是需要安装的,不然在启动项目时就会报Error in Cannot find module 'less' 原因是npm @ 3不能再解析peerDependencies了,OK安装后,我们还要着手配置下,打开config文件夹中的webpack.config.dev.js文件,搜索“exclude:”  找到大概这么一行:

exclude: [/\.js$/, /\.html$/, /\.json$/],

loader: require.resolve('file-loader')

... ...

在exclude: 后面的数组中加入一项   /\.less$/   这行变为

exclude: [/\.js$/, /\.html$/, /\.json$/,/\.less$/],

然后在loders中加入一段:

//新增less支持

{ 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: () => [ pxtorem({ rootValue: 100, propWhiteList: [], }), autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), ], }, }, { loader: require.resolve('less-loader'), options: { modifyVars: { "@primary-color": "#1DA57A" }, }, }, ], },

搞不清楚loders结构的同学,找下如下代码,加在其最后一个花括号下方即可:

{

            test: /\.(js|jsx|mjs)$/,

            include: paths.appSrc,

            loader: require.resolve('babel-loader'),

            options: {

              plugins: [

                      ['import', { libraryName: 'antd-mobile', style: true }],

                    ],

              // This is a feature of `babel-loader` for webpack (not Babel itself).

              // It enables caching results in ./node_modules/.cache/babel-loader/

              // directory for faster rebuilds.

              cacheDirectory: true,

            },

  },

一模一样的方式在 config文件夹里的webpack.config.prod.js里在做一遍,这步配置就完成了。接下来安装babel-plugin-import ,然后就可以按需加载组件了,并且它会自动关联css样式,无需单独引入。我们只需要这样引入一次即可:import { Button } from 'antd-mobile';详细的见官网吧。

cnpm install babel-plugin-import --save-dev

安装完毕后,在webpack.config.dev.js中找到这段代码按如下配置:

{

    test: /\.(js|jsx)$/,

    include: paths.appSrc,

    loader: require.resolve('babel-loader'),

    options: {

      plugins: [

        ['import', { libraryName: 'antd-mobile', style: true }],

      ],

      // This is a feature of `babel-loader` for webpack (not Babel itself).

      // It enables caching results in ./node_modules/.cache/babel-loader/

      // directory for faster rebuilds.

      cacheDirectory: true,

    },

},

至此,Create-React-App脚手架搭建antd-mobile并进行按需加载的开发环境配置完毕!

推荐阅读更多精彩内容