Howto implement new antd 3.0 into a brand new project?

help
1

Hi.

Working on my second ever meteor app. First one was using the Blaze view. This time I am going down the React view route.

I saw the announcement for antd 3.0 this morning, and it looks great, but I’ve struggled to figure out how to implement it into a brand new meteor create --full app-name

Would someone mind nudging me in the right direction?

Thank you.

2

I just added it to a basic node app, but I’m assuming the process would be the same.

Add dependencies (babel-plugin-import makes cleaner import statements):

meteor npm install --save antd babel-plugin-import

Import styles: 
// client.js
import 'antd/dist/antd.css';

Use components: 
import { Button } from 'antd';

export default () => (
  <Button type="primary">Primary</Button>
);
2 Likes
3

I import like

import Row from 'antd/lib/row';

I think otherwise you’ll pull in the whole antd library? I think the point of babel-plugin-import is to allow imports component by component?

4

Yeah, exactly. Not sure about previous versions, but the new one should throw a warning about pulling in the whole lib if you try

import { Button } from 'antd';

without including babel-plugin-import.

1 Like
5

How did you manage to get it working?
ReferenceError: Button is not defined if I simply import from antd although I have `babel-plugin-import’ setup as per their docs.
I think somethin in meteor build system interferes with the plugin. What’s your .babelrc looks like?

6 

{
  "plugins": [
    ["transform-class-properties", "import", {"libraryName": "antd"}]
  ],
  "presets": ["es2015", "react"]
}

this goes in package.json (for me, to handle less)

  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "safari 8",
          "safari 5",
          "ie 8",
          "ie 9",
          "opera 12.1",
          "ios 6",
          "android 4"
        ]
      }
    }
  },