webpack安装babel的es6 loader 的开发依赖时报了一堆的错是为什么

2024-12-26 10:29:35
推荐回答(1个)
回答1:

  1.准备:
  npm安装以下组件

  a.安装react/antd:
  npm install react react-dom antd --save

  b.安装webpack/less:
  npm install webpack less --save-dev

  webpack根据需要选择使用-g安装

  c.安装babel-loader以及其他相关package:
  npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

  d.选择安装style-loader/css-loader
  npm install style-loader css-loader --save-dev

  2. 配置webpack.config.js
  具体配置可以查看webpack提供的例子,主要依赖的是babel-loader
  babel-loader上也有webpack.config.js应该如何编写的例子,传送门: babel-loader

  3. 编写我们的文件(例如: demo-antd.jsx)
  只使用了antd提供的Button组件。只使用了antd提供的Button组件。
  ps: 对比
  import { Button } from 'antd';

  和
  import Button from 'antd/lib/button';

  后者不会将antd中所有的内容都引入,如果你只是需要Button这么一种组件的话,推荐使用后一种写法。

  4. 执行构建
  webpack ./demo-antd.jsx demo-antd-bundle.js

  将生成demo-antd-bundle.js文件

  5. 在页面中引入bundle文件(demo-antd-bundle.js)

  执行到这一步,在浏览器中查看页面可以应该可以看到一个原生样式的button元素,因为antd并没有将样式使用内联style的方式写入js文件中。

  这里我们暂时将问题一搁置,来看看问题二:组件库的内部机制。

  因为没有深入去看过antd的源代码,没法详细说明antd的在代码编写上的一些....怎么说,就是『代码为什么这样写』这个问题,有兴趣的话,可以去查看源码,正如 @陈吉浩 所说,查看github上的代码比npm下载后的代码更舒服。