ES6语法的reactjs组件babel编译

本文介绍如何创建React组件并使用Babel进行ES6及JSX语法的编译流程。涉及MyComponent.jsx示例代码及其编译配置,包括.babelrc文件设置、npm命令安装与使用等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

#本文节选自:http://react-china.org/t/es6-react-npm/3879

首先,让我拥有一个react组件

MyComponent.jsx

import React from 'react';  //es5 无法识别import语句

const MyComponent = props=> {
  return <div>              //babel也无法识别jsx语法
    props:
    <pre>{JSON.stringify(props, null, 2)}</pre>
  </div>
}

export default MyComponent; 

##约定:
src 下用于存放源代码
lib 是编译后的代码,这个目录只读
所有包含 ES6 语法的文件名统一后缀为 .es6
所有包含 JSX 语法的文件后统一缀名为 .jsx

note:
假设源代码里还有另外两个文件 foo.es6 和 bar.js,简化起见都丢到 src 的根目录下。

说明

目前最常用的是 Babel5 版本,但是 Babel6 版本的设计更为精巧,已经非常推荐更新。也正是由于 Babel 有两个版本,所以开发过程中很有可能遇到这样的情况,
模块 A 的开发依赖于 Babel5 版本,而模块 B 依赖于 Babel6 版本。

# 解决这个问题最好的做法就是把 A 和 B 拆开,独立开发和发布。并且在发布到 NPM 的时候发布是的编译后的,也就是 ES5 版本的代码。

准备工作

如果你的机器上的 babel 是全局安装的,是时候卸载它了,因为它的版本不是 5 就是 6 ,会导致一些不可预见的问题。
npm uninstall babel-cli --global

正确的安装方式是把 babel-cli 作为 develeopment 的依赖
npm install babel-cli --save-dev

使用的时候并不是直接调用全局的 Babel 而是调用依赖里的 Babel 可执行文件
./node_modules/.bin/babel

如果按照前文的约定来组织代码,src 目录结构看起来是这样的
src
├── bar.js
├── foo.es6
└── MyComponent.jsx

#细节:
.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}
如果要转换 JSX 语法文件,就加上 react 的 preset,同时项目依赖里要添加babel-preset-react
npm install babel-preset-react --save-dev

开始编译

./node_modules/.bin/rimraf lib

./node_modules/.bin/babel src --copy-files --source-maps --extensions .es6,.es,.jsx --out-dir lib

输出目录的结构

lib
├── bar.js
├── foo.js
├── foo.js.map
├── MyComponent.js
└── MyComponent.js.map

解释

第一条命令 ./node_modules/.bin/rimraf lib
作用 编译前清空之前的 lib 目录,这是一个好习惯,可以杜绝对 lib 下的文件的任何手动更改。

第二条命令 ./node_modules/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx --copy-files
作用 遍历 src 目录下的文件,如果后缀名是 .es/.es6/.jsx 中的一种,就编译成 ES5,否则就直接拷贝到输出目录 lib 下

参数详解:
--out-dir lib 指定输出目录为 lib
--extensions .es6,.es,.jsx 指定需要编译的文件类型
--copy-files 对于不需要编译的文件直接拷贝
--source-maps 生成 souce-map 文件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值