react项目配置babel7

XGBCCC 发布于2019-08-26 10:26 / 883人阅读

摘要：项目配置不多说，先上配置总结的包都是以开头的，所有的模块插件啥的都是在目录下中真正干活的是插件，插件的作用是预置，就是一个插件包的集合，你也可以自己写插件包插件包不够用，再配置呗配置了肯定要用新版本的老版本的会找而不是会

babel7 React项目配置 不多说，先上babelrc配置

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "66"
        },
        "corejs": {
          "version": 2
        },
        "useBuiltIns": "usage",
        "modules": "commonjs"
      }
    ],
    "@babel/react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": true}],
    "add-module-exports",
    ["import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

总结

babel7的包都是以 @babel开头的，所有的模块插件啥的都是在node_modules/@babel/目录下

babel中真正干活的是插件，插件的作用是transform

preset（预置），就是一个插件包的集合，你也可以自己写插件包,插件包不够用，再配置plugins呗

配置了babel7,肯定要用新版本的babel-loader,老版本的babel-loader会找 babel-core而不是@babel/core会报错

babel7新增了babel.config.js配置文件，是项目级别的配置，建议使用， .babelrc配置仍然可以用，至于为啥，memorepo可以了解一下

babel7废弃了babel-preset-stage-0这样的配置，如果不懂stage-0啥的，自行学习，如果要用，需要直接引入cores-js的相关模块

@babel-preset-env 这样的preset可简写，如上

polyfill垫片，就是web开发中，可移植的代码补充库

关于babel-polyfill其实就是core-js 和一个工具库

core-js是实现了一些现在没支持的新功能的库，分2和3两个大版本

babel6之后，对export default 这样的 es 模块写法不支持，需要一个 babel-plugin-add-module-exports的库支持

要支持装饰器的写法，需要@babel/plugin-proposal-decorators 插件支持，配置如上

babel-plugin-import 是配置antd按需加载的一个插件，做React项目，几乎antd是必备的吧

私有云云服务器怎么部署react项目 babel7 linux配置项目 java项目配置环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106164.html

如何搭建一个基于react、webpack4、babel7的项目（一）

摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。前言写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

IamDLY 2019-08-23 12:30 评论0 收藏0
手动创建基于webpack+babel的react应用(babel7)

摘要：搭建一个项目环境首先生成文件至此我们就可以安装的相关依赖了。下的依赖核心部分，把转化成外部引用辅助函数和内置函数，自动填充代码而不会污染全局变量。入口文件我在中配的，所以在下新建文件，添加我们的第一个组件。搭建一个React项目环境首先npm init生成package.json文件.至此我们就可以安装react的相关依赖了。 npm install react --save np...

alaege 2019-08-23 15:20 评论0 收藏0
基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
使用babel7构建完美的纯ts开发环境

摘要：更新前言由于最近在重写个人的原生插件项目遇到了集成单测的需求单纯地使用会出现难以估计的错误所以决定使用完美摒弃了传统的方案对于主要流程记录下项目地址同时也欢迎新手和想提升的你参与到项目中来详情可阅读一基本配置先通过简单的配置让更新 [2019-5-9] Added Initial release 0、前言由于最近在重写个人的原生ts插件项目, 遇到了集成jest单测的需求, 单纯地...

Freeman 2019-08-26 18:26 评论0 收藏0