ant-design / parcel-antd Goto Github PK

View Code? Open in Web Editor NEW

75.0 75.0 23.0 10 KB

Use antd with parcel

HTML 25.49% TypeScript 60.41% Less 14.10%

parcel-antd's Introduction

Ant Design

An enterprise-class UI design language and React UI library.

Changelog · Report Bug · Request Feature · English · 中文

✨ Features

🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

Modern browsers
Server-side Rendering
Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or use opensumi.run, a free online pure front-end dev environemt.

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing

Let's build a better antd together.

We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contributing Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)

For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.

❤️ Sponsors and Backers

parcel-antd's People

Contributors

Stargazers

Watchers

parcel-antd's Issues

compiling Error

index.js: Conflicting babel versions found in .babelrc. Make sure all of your plugins and presets depend on the same major version of babel

Less module issue (Inline JavaScript is not enabled)

Project doesn't run

Tried to run the project with npm install and npm start and I get this error:

Server running at http://localhost:1234 
🚨  /Users/vsorokin/ws/stuff/parcel-antd/index.js: Conflicting babel versions found in .babelrc. Make sure all of your plugins and presets depend on the same major version of babel.

I tried to update all of the packages to the latest, even used

"@babel/preset-env": "7.5.5",
"@babel/preset-react": "7.0.0",

didn't help.
Basically, I was searching for a working example of parcel with antd and babel-plugin-import and can't find it...

Inline JavaScript is not enabled. Is it set in your options?

not working ???
Inline JavaScript is not enabled. Is it set in your options?

antd.less: Inline JavaScript is not enabled. Is it set in your options?

How to work with antdv4?

Antd upgrade to v4 and I get warning Inline JavaScript is not enabled. Is it set in your options?.
How to use parcel and antd?

how to config with typescript

how to config with typescript?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Error with antd 4.x & @ant-design/icons

dependencies

"@ant-design/icons": "^4.3.0",
"antd": "^4.9.4",

import @ant-design/icons in app.tsx

import { SettingOutlined } from '@ant-design/icons';

// ...

const App = () => {
  return (
    <SettingOutlined />
  )
}

The command npm run dev works.

After npm run build, then serve dist.

The page will go wrong.

error message: Uncaught TypeError: Cannot read property 'TinyColor' of undefined

不支持样式按需引入吗？

Not working


> [email protected] start /home/xxx/xxx/xxx/parcel-antd
> parcel index.html --no-cache

Server running at http://localhost:1234 
⏳  Building _iter-step.js...
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of react@>=16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@>=16.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
🚨  /home/xxx/xxx/xxx/parcel-antd/node_modules/antd/es/style/index.npm WARN [email protected] requires a peer of react@>=16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@>=16.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 66 packages in 14.734s

error when i use Datepicker

import React from 'react';
import ReactDOM from 'react-dom';
import { Button ,DatePicker} from 'antd';
import moment from 'moment';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;


ReactDOM.render(
  <div>
<Button type="primary">Button</Button>
<DatePicker  defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
  </div>
, document.getElementById('mountNode'));

console show that:
moment.isMoment is not a function

iconfont local failed

parcel 1.3

error

Customize theme

using .lessrc with parcel doesn't work

{
    "modifyVars": {
        "@primary-color": "#1DA57A"
    }
}

is there any other way to do it?