Adding some babel script to .babelrc?


#1

There’s a UI framework called ant-design-mobile that requires an installation of babel-plugin-import

npm install babel-plugin-import --save-dev

and adding a line to the .babelrc file:

{“plugins”: [[“import”, { “libraryName”: “antd-mobile” }]]}

Does it still need ejecting to get the new babel settings to work? I was considering that framework, but if it required ejecting I probably wouldn’t use it.


#2

You shouldn’t need to eject to get different babel settings to work.


#3

First, install antd. You can do next steps if you want to build for production:

  1. install the required babel plugins:
    npm install babel-plugin-import --save-dev

  2. via text editor open node_modules/babel-preset-react-app/index.js

  3. find the text ‘const plugins = [’

  4. just add the next line with the following text:
    [
    require.resolve(‘babel-plugin-import’),
    {
    “libraryName”: “antd”,
    “libraryDirectory”: “lib”, // default: lib
    "style": true
    },
    {
    “libraryName”: “antd-mobile”
    },
    ],

  5. save the file and run ‘npm run build’

You should now have the smaller minified files without ejecting or breaking your create-react-app script.
Just remember that you have to do the same thing again if you remove your node_modules folder.