《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新

世界上最伟大的投资就是投资自己的教育

剧场模式
首页前端Webpack轻松学 Webpack 4 免费视频教程

轻松学 Webpack 4 免费视频教程 #20 打造 React 开发环境

求知小风 · 元婴发布于
2

https://babeljs.io/docs/en/babel-preset-react

$ npm install react react-dom
$ npm install --save-dev @babel/preset-react

.babelrc

{
  "presets": [
    [
      '@babel/preset-env', { "debug": true }
    ],
    [
      "@babel/preset-react", { "development": true }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

src/index.js

import App from './App';

src/App.js

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <p>React here!</p>
    </div>
  )
}

export default App;

ReactDOM.render(<App />, document.getElementById("app"));
3 条回复
  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #1

    "@babel/preset-react", { "development": true } 这个development属性 好像课程中没有提到 网上查下了也不是很理解 希望大佬解答一下

  • 求知小风 · 元婴

    其实很简单,就是开发环境的话,你开启就好了,线上不要开,一般来说,线上环境和开发环境分开 配置

  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #3

    好的 谢谢

热门课程 love
喜欢
微信群讲师微信知乎服务号github视频号
程序员随风
课程目录

1Free轻松学 Webpack 4 免费视频教程 #1 课程介绍

2Free轻松学 Webpack 4 免费视频教程 #2 安装

3Free轻松学 Webpack 4 免费视频教程 #3 zero config

4Free轻松学 Webpack 4 免费视频教程 #4 Mode

5Free轻松学 Webpack 4 免费视频教程 #5 搭建项目

6Free轻松学 Webpack 4 免费视频教程 #6 用 npx 来解决全局安装的问题

7Free轻松学 Webpack 4 免费视频教程 #7 配置文件 Webpack.config.js

8Free轻松学 Webpack 4 免费视频教程 #8 配置多入口文件 Entry Points

9Free轻松学 Webpack 4 免费视频教程 #9 什么是 Babel

10Free轻松学 Webpack 4 免费视频教程 #10 babel-loader 的介绍与安装

11Free轻松学 Webpack 4 免费视频教程 #11 Babel Plugins - plugin-transform-arrow-functions

12Free轻松学 Webpack 4 免费视频教程 #12 Babel Plugins - 更多的插件

13Free轻松学 Webpack 4 免费视频教程 #13 Babel Presets - @babel/preset-env

14Free轻松学 Webpack 4 免费视频教程 #14 devtool false 让编译后的代码可读性强一些

15Free轻松学 Webpack 4 免费视频教程 #15 @babel/polyfill 的那些事儿 part 1

16Free轻松学 Webpack 4 免费视频教程 #16 @babel/polyfill 的那些事儿 part 2 - 原理及如何解决

17Free轻松学 Webpack 4 免费视频教程 #17 @babel/polyfill 的那些事儿 part 3 - preset-env 的选项和按须编译

18Free轻松学 Webpack 4 免费视频教程 #18 @babel/runtime

19Free轻松学 Webpack 4 免费视频教程 #19 @babel/plugin-transform-runtime 是如何工作的

Free轻松学 Webpack 4 免费视频教程 #20 打造 React 开发环境

21Free轻松学 Webpack 4 免费视频教程 #21 使用第一个 Webpack 插件 html-Webpack-plugin

22Free轻松学 Webpack 4 免费视频教程 #22 配置多个单页面应用

23Free轻松学 Webpack 4 免费视频教程 #23 使用 loader 来处理 CSS

24Free轻松学 Webpack 4 免费视频教程 #24 使用 loader 来处理 Sass 和 Less 文件

25Free轻松学 Webpack 4 免费视频教程 #25 用 mini-css-extract-plugin 把 CSS 分离成文件

26Free轻松学 Webpack 4 免费视频教程 #26 启动服务器并实时刷新 Webpack-dev-server

27Free轻松学 Webpack 4 免费视频教程 #27 用 clean-Webpack-plugin 来清除文件

28Free轻松学 Webpack 4 免费视频教程 #28 如何打包图片(包含规划编译出的文件的目录结构)

29Free轻松学 Webpack 4 免费视频教程 #29 如何压缩图片

30Free轻松学 Webpack 4 免费视频教程 #30 构建开发和生产环境 - 分离配置文件

31Free轻松学 Webpack 4 免费视频教程 #31 显示打包进度条

32Free轻松学 Webpack 4 免费视频教程 #32 调整配置 - 在浏览器显示 DevServer 的 编译错误的信息

33Free轻松学 Webpack 4 免费视频教程 #33 devtool 和 source map 深入解析

34Free轻松学 Webpack 4 免费视频教程 #34 解决开发环境和生产环境打包不一致的情况

35Free轻松学 Webpack 4 免费视频教程 #35 打包优化 - 深入探索 mode、Optimization、terser-Webpack-plugin、UglifyjsWebpackPlugin

36Free轻松学 Webpack 4 免费视频教程 #36 打包优化 - 生产环境压缩 CSS 文件

学员(83)
100 · 大罗vaveee@qq.com · 道祖watin · 练虚wangyinwei1 · 道祖JesusCracker · 道祖🔆 · 道祖温文尔雅 · 道祖chj12138 · 道祖NullPointer · 道祖昀 · 大乘爱优美 · 元婴mrj · 大罗
最新动态
100 · 大罗学习到了5:58
vaveee@qq.com · 道祖学习到了0:23
watin · 练虚学习到了5:19
wangyinwei1 · 道祖学习到了6:02
JesusCracker · 道祖学习到了5:05
统计信息
    学员: 19866
    视频数量: 1241
    帖子数量: 443

© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1138

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top