react fusion.design体验一：create-react-app+fusion.design+babel

  • 分类: react
  • 浏览量: 4957

阿里企业级中后台产品开发

具体介绍不就说了，自己看连接：https://fusion.design/

创建react项目。

采用facebook到create-react-app

npm install -g create-react-app
create-react-app design
cd design
npm start

此时看到react大大到logo就表示成功了

安装fusion design

npm install @alifd/next --save

我装到时候提示差几个库，要自己手动装，自己根据提示信息完成各个module到安装

npm install moment
npm install node-sass

按需加载

一个组件到加载写法

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

但是这样太不高端了，啰嗦，所以用他推荐到babel到方式

npm install babel-plugin-import -D

然后根目录新建个文件.babelrc，文件内容

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "@alifd/next",
        "style": true
      }
    ]
  ]
}

然后再npm start
修改src/App.js

import { Button } from '@alifd/next';

//然后render里面加个
   <Button type="normal">Normal</Button>

神奇到事情发生了！！！！

没有用到组件，咋回事呢，去git上看看https://github.com/alibaba-fusion/next/issues，不活跃啊，啥都没有，百度搜一圈没用。。google来一伙，原来create-react-app都react-scripts里面 webpack.config.js里面吧babelrc给禁用来，设置成来false,网友说改成true就可以来，试来下，果然。

但是！！现在都是基于自动化构建，不会让我们构建到时候也去修改node_modules目录下到配置吧。 又google来一番(吐槽下百度垃圾！！啥用都没有), 找到解决方法,英文好都都可以看下：https://github.com/facebook/create-react-app#converting-to-a-custom-setup
运行

npm run eject

此时会吧内置配置给暴露出来，package.json会多很多配置，根目录下会生成一个config目录，里面有个webpack.config.js，然后修改里面多

...
- babelrc: false,
+ babelrc: true,
...

再启动npm start！搞定

组件比较多，模板也多，还可以定制ui，自动提交到npm，定制好后，到哪儿都npm install **就搞定，高端都不行了。装逼神器。
接下来找个项目试用下跳跳坑。

好了，体验到此结束！！

标签: 无

发表评论：