React学习笔记之二(windows下配置npm babel预编译JSX的开发环境)

其实这篇应该是写试用Reactjs来创建一个评论demo,在这个过程中,我发现如果不使用JSX语法来写代码,会非常繁琐效率低。所以如果要引入团队实际开发,需要一个流程:开发 使用JSX——>调试 引入js在浏览器编译进行——>上线 工具编译——提交编译后的js。

编译JSX工具

Babeljs(中文名巴贝尔)(题外话:其实这个英文的原意是巴别塔的意思,圣经创世纪12章出现,人想挑战上帝的权威,建这么一个塔,反应了人的骄傲,其实是必会带来倒塌的。巴别塔的意思是变乱,上帝变乱了建造巴别塔的人的语言,然后他们就散去了。

建议使用nodejs,npm安装对应的包,通过命令行来执行预编译。(windows系统)步骤如下:

1)安装nodejs(自带了npm)

2)切换到项目的根目录下(比如我的项目文件是commentsApp)依次执行

最新版本的babel没有自带这些编译的对象(比如React),所以需要自己安装2个预设的插件

3)我的项目目录

comments.json是代替数据库存放留言的文件,package.json是npm模块的配置,server.js是一个nodejs评论API服务。

这里有一个需要特别注意:.babelrc文件一定要创建,内容为{“presets”:[“es2015″,”react”]},而且在windows下通过如下方式:

4)package.json

配置这个scripts节点是为了简化命令,也就是说,现在我运行如下命令:

就可以执行把src目录下的js编译,输出到lib目录下。

如果不配置下简化的命令,需要进入babel的目录\node_modules\.bin去执行命令babel src -d lib

可以参考这里http://babeljs.io/docs/setup/#installation

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1301
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注