‘壹’ babel 为什么没能识别我 js 文件中的 jsx 语法
为纪念10年没写blog，第一篇博文就以这样一个有趣的窍门开始吧 -___- 在ES5中，当我们调用一个函数时，如果要传入的参数是根据其他函数或条件判断生成的，也就是说不确定会传入多少个参数时，在不改变原函数的情况下该如何办呢？ (当然了，能避免此文所述情况发生就尽量避免，比如将参数改为object或array等等) 大部分人可能知道用apply能完美解决这个问题： apply与call一样会将第一个参数作为函数的调用对象，即改写了调用函数内的this指针为第一个参数，如果不是对象的方法，可以不考虑this，传入一个null即可。 而不同之处在于后面的参数，apply将所有要传入调用函数的参数放在一个数组中，call是与原函数一样依次追加进去。 既然是数组那就可控了，根据其他函数或逻辑判断来生成数组，可达到传入动态个数参数的目的。 但是我遇到一个头疼的问题，要在用new创建对象时传入动态个参数，几年才遇到一次的问题： 如果是用ES6，有了rest参数，上述问题全都不是问题。注意，数组args前面加三个点并不是语法错误，而是ES6提供的rest参数写法，你可以理解为将...args替换为args数组去掉方括号后的字符。 但ES5里真的就没有办法实现了吗？毕竟ES6大部分都是语法糖，可以用babel一类的工具编译为ES5，带着疑问，我们就用babel编译一下看看得到什么： 看到最后一行惊呆了，别害怕，让我们分析一下这句代码。首先肢解一下，分三步来看： 1. 毫无疑问，用concat将null与我们的参数连接为一个数组，作为apply第二个参数，即得到[null, 1, 2, 3]； 2. 让我们运算一下apply，第一个参数Foo会取代Function来调用原生的bind方法，第二个参数数组的内容将作为bind的参数传入，即得到Foo.bind(null, 1, 2, 3)； 3. bind方法第一个参数与apply、call类似，修改this指针，而后面的参数可以为函数植入默认的前置参数值（preset leading argument），也就是说当bind执行完后在第一组小括号内我们得到一个已经注入了三个参数值的Foo类，暂且叫FooWithArgs； 最终，当我们 new FooWithArgs(); 时，就不用传入任何参数了。等同于 new Foo(1, 2, 3);
‘贰’ 如何学习用Typescript写Reactjs
首先扫盲一下，先从搭建环境开始：
1.安装node，因为ts的编译器是js/ts写的；
安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；
2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；
3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器
npm i -g typescript@next
4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；
有网友指正tsd工具不是安装ts的时候自带的，需要另外安装，装太久不记得了。
npm install tsd -g
5. 命令行下载react的ts头文件,
tsd install react-global --save
注意上面之所以写 react-global 而不是react， 因为我们接下来使用比较原始的写法，直接把React当作全局对象使用， 而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；
上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件
tsc --init
命令创建了tsconfig.json配置文件, 打开该文件
增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx
把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出
"target": "es5", 这里es3改成es5,
"watch": true 是否监听文件修改 如果你用的是vs,这行不重要
6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库
bower install --save react
7.以上环境配置好了, 开始写代码:
创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)
创建一个demo.html, 添加文件的引用
<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
</body>
</html>
8. demo.tsx 写代码
class MyClass extends React.Component<any, any> {
render() {
return <h1>hello {this.props.name}</h1>;
}
}
document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(<MyClass name="Tom" />, document.body);
});
9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行
tsc
tsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件
10. 打开demo.html可以看到效果了;
11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
12. 下班, 有空再写;
－－－－－－时间分割－－－－－－
13、继续写，对1-12进行润色，转入传教模式；
妖兽啦，这里14-15的文字怎么不不见了，知乎编辑器bug好多。
不记得写了什么，大概说的是 工厂方法创建子类和用class直接继承的差异。
React.createClass 和 Backbone.View.extend 等都是工厂方法创建子类
文字断了。。。。
以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；
class MyView extends React.Component {
render() {
return <h1>hello {this.state.name}</h1>; //会抛异常,因为state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}
需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）
class MyView extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: '',
};
}
render() {
return <h1>hello {this.state.name}</h1>;
}
}
16、当组件化遇到强类型：
从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：
1）暴露了太多的Dom结构以及别的实现细节；
2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；
3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；
React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；
17、强类型的ts有IDE的代码提示，但是面对各种mvvm的字符串模版组装，却无用武之地，以下是典型的mvvm数据绑定和有IDE支持的JSX数据组装在开发体验上的区别；
模板字符串的绑定里，工具无法检查出问题，只能在运行时抛出异常，而jsx则可以提示拼写错误。
18、关于生产力再抛一个概念：无障碍编程；
我们平时的开发工作，有不少时间花在查API文档、调试代码、查字典（给变量命名），需要不停地切换任务窗口……
上面的例子比较小，实际开发中各种JSON对象可能有10来个属性，且结构层层嵌套，不一边查文档一边抓包，根本无法完成开发；
如果项目是并行开发的，文档都还没定义出来（但是产品原型已经有了，甚至html页面都已经切好），如何快速完成前端部分的开发工作？
业界常用方法是使用mock数据（先造假数据），下面介绍一种更简单的办法（为了举例先虚拟一个需求场景 —— 一个留言板html的组装）；
别忘了JS变量是可以用中文的，好吧不用查字典了，先把需求完成再说，在组装html的过程中TS+JSX发挥了巨大的优势，三下五除二就把组装界面的代码写好了，不用调试我可以确定没有错误的；
过了些天，WebAPI的数据结构定义出来了，可以着手进行代码重构（或者说把查字典的工作集中完成），利用开发工具的重构功能进行变量改名：
最后项目完成的时候，是把所有类型的定义都挪到独立的描述文件里(比如叫做webapi.d.ts)，原来的interface可以改成type关键字(类型别名)：
以上，这个开发过程中基本没有一边查文档、一边查字典，效率的提升是明显的。
‘叁’ 如何使用react-tools将jsx编译成javaScript
使用react-tools将jsx编译成JavaScript方法：
1,通过npm安装react-tools
npm –g react-tools
2,通过cmd进入项目根目录执行watch命令 jsx --watch src/ build/
src路径下存放的是jsx文件，编译后的js存放到build路径下
3,当目标文件变化以后，自动构建生成新的js文件。
‘肆’ 如何把jsx文件转成js文件
return{...一堆事件处理函数}
}();
AdmanageRE.Monitor=function()
{
//...一堆事件处理函数
}();
</script>
<body onload="AdmanageRE.Monitor.getaaa()" onmouseover="AdmanageRE.Monitor.MouseOver1(event)" onmousedown="AdmanageRE.Monitor.MouseClick1()" onkeydown="AdmanageRE.Monitor.MouseKeydown(event)">
<h3 onclick="AdmanageRE.Monitor.MouseClick2(event)" onmouseover="AdmanageRE.Monitor.MouseOver2()"></h3>
‘伍’ 如何用webpack打包一个网站应用
随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。
一般我们写页面，大概都是这样的结构：
index.html
css
style.css
js
index.js
...........
这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。
1.我们需要先安装node环境。没安装的请自行安装
2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。
3.在项目目录下安装webpack
npm install --save-dev webpack
4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //编译后的文件路径
filename: 'app.js'
},
mole: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 来编译处理
{ test: /\.js$/, loader: 'babel' },
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
};
mole.exports = config;
我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。
5.这些loader都是需要npm安装的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015
6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：
{"presets":["es2015"]}
保存。
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);
可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。
9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！
10.让我们试试吧
‘陆’ 如何将.vue的代码转换为es5
Babel是一个转换编译器，它能将ES6转换成可以在浏览器中运行的代码。Babel由来自澳大利亚的开发者SebastianMcKenzie创建。他的目标是使Babel可以处理ES6的所有新语法，并为它内置了ReactJSX扩展及Flow类型注解支持。据codemix创始人CharlesP
‘柒’ 如何将es5的代码转换为es6
在这里需要的环境就是node，可以去查一下安装教程，这里就不赘述了。当然需要我们的主角--webpack，很强大的一个工具。
安装webpack：（cmd命令窗口，也可以用git）
a.安装webpack到全局 npm install webpack -g
b.然后安装webpack到你的项目中（要切盘到你的目录下） npm install webpack --save-dev
c.webpack中常用命令webpack --watch 只要改变了jsx内容，直接将改变的内容重新编译打包,运行久了以后会自动终止
安装完成后需要下面的插件（切盘到你的项目下）：
1.npm install babel-core --save-dev
2.npm install babel-loader --save-dev 下载加载器
3.npm install babel-preset-es2015 --save-dev
逐步下载上述插件，完成之后创建一个webpack.config.js文件放在你的项目目录下，在里面写配置文件，代码如下：
mole.exports={
//文件入口
entry: {
main: './es6/main.js',
common: './es6/common.js'
},
//文件出口
output:{
path:'./js',
filename:'[name].bundle.js'
},
//引入模块。babel-loader转换
mole:{
loaders:[
{
test: /\.js$/,
exclude: /node_moles/,
loader: "babel-loader",
query:
{
presets: ['es2015'], //并不明白，这么写就对了，如果用react，就在这里写上['react']
//npm install babel-plugin-transform-runtime 然后引入 解决es6生成器函数带来的问题
}
}
]
}
}
ok，完成。
‘捌’ 浏览器中不能直接识别语言的程序
ES6、Typescript、less、sass、stylus。有些浏览器还不能直接识别的语言，例如ES6、Typescript、less、sass、stylus等等，直接先编译成ES5、css等供浏览器能识别的语言，这样我们就能在项目中直接使用新的技术、新的语法糖（例如JSX）来开发我们的页面，提高开发效率。
‘玖’ 如何使用 ES6 编写一个 React 模块，并且编译后发布到 NPM
如果你在使用 React， 那么肯定已经撸了好多自己的组件， 并尝试着共享出来。在 OneAPM 前端开发过程中， 我们也曾遇到了一些组件共享的问题：
例如:
是通过 git 直接发布还是通过 NPM 发布 ？
发布的是 ES5 的代码还是 ES6 的代码 ？
如何解决 Babel5 和 Babel6 的冲突 ？
这篇文章会通过编写一个叫做 MyComponet 的例子来演示发布一个模块需要注意的地方, 并不涉及单元测试和代码规范等。
前端开发果真是发展迅猛，刚享受到由模块化，组件化和单元测试带来的种种好处，又得迅速拥抱 Grunt, Gulp, Browserify， Webpack 这类自动化工具的变革。除了工具和生态圈，JavaScript 本身也在飞速发展着。ES2015(ES6) ，ES2016(ES7) ... 照这样的节奏，几乎是一年一个标准。标准多了，为解决兼容性的问题，竟也派生出了 源代码 和 编译 的概念。前端开发者通过语法糖、转化器、Polyfill 等，可以享受到标准乃至尚未定稿草案里的规范的便利，大幅提升开发效率。
至于这个模块本身,它的功能特别简单, 就是显示模块自身的的属性。
源代码
我们来编写组件 MyComponent.jsx ，放到项目的 src 目录下。
import React from 'react';
const MyComponent = props=> {
return <div>
props:
<pre>{JSON.stringify(props, null, 2)}</pre>
</div>
}
export default MyComponent;
关于各种文件放在哪里, 这里是我推荐的一些约定:
src 下用于存放源代码
lib 是编译后的代码，这个目录只读
所有包含 ES6 语法的文件名统一后缀为 .es6
所有包含 JSX 语法的文件后统一缀名为 .jsx
假设源代码里还有另外两个文件 foo.es6 和 bar.js，简化起见都丢到 src 的根目录下。
编译
为了把 ES6 代码编译成 ES5，需要安装 Babel，这个工具可以说野心极大，一次编译可以让 JavaScript 运行在所有地方。（听起来是不是有点 Java 的作风）
目前最常用的是 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_moles/.bin/babel
如果按照前文的约定来组织代码，src 目录结构看起来是这样的
src
├── bar.js
├── foo.es6
└── MyComponent.jsx
模块所有的代码都在一个目录下，这样编译过程就简单多了，两条命令就可以完成
./node_moles/.bin/rimraf lib
./node_moles/.bin/babel src ---files --source-maps --extensions .es6,.es,.jsx --out-dir lib
输出目录的结构
lib
├── bar.js
├── foo.js
├── foo.js.map
├── MyComponent.js
└── MyComponent.js.map
具体解释一下各个命令的作用：
第一条命令 ./node_moles/.bin/rimraf lib
作用 编译前清空之前的 lib 目录，这是一个好习惯，可以杜绝对 lib 下的文件的任何手动更改。
第二条命令
./node_moles/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx ---files
作用 遍历 src 目录下的文件，如果后缀名是 .es/.es6/.jsx 中的一种，就编译成 ES5，否则就直接拷贝到输出目录 lib 下
参数详解:
--out-dir lib 指定输出目录为 lib
--extensions .es6,.es,.jsx 指定需要编译的文件类型
---files 对于不需要编译的文件直接拷贝
--source-maps 生成 souce-map 文件
编译过程中还隐含了一个步骤就是加载 .babelrc 文件里的配置，该文件内容如下
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
这是因为 Babel6 采用了插件化的设计，做到了灵活配置：如果要转换 JSX 语法文件，就加上 react 的 preset，同时项目依赖里要添加
babel-preset-react
npm install babel-preset-react --save-dev
样例代码
开发和调试 React 模块目前最好用的打包工具还是 Webpack，在项目跟目录下，新建一个 example 目录：
example/index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body></body>
<script src="bundle.js"></script>
</html>
example/src/index.jsx
import React from 'react';
import MyComponent,{foo,bar} from '../../';
import {render} from 'react-dom';
var element = document.createElement("div");
document.body.appendChild(element);
render(<MyComponent name="myComponent"/>, element);
webpack.config.js
var path = require('path');
mole.exports = {
entry: path.join(__dirname, 'example', 'src', 'index.jsx'),
output: {
filename: 'bundle.js'
},
mole: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
include: [
path.join(__dirname, 'example')
]
}]
},
devServer: {
contentBase: path.join(__dirname, 'example')
}
}
运行样例代码
./node_moles/.bin/webpack-dev-server
发布
发布前，还有一件事就是为你的模块添加一个入口文件 index.js
mole.exports = require('./lib/MyComponent');
exports.default = require('./lib/MyComponent');
exports.bar = require('./lib/bar');
exports.foo = require('./lib/foo');
接下来就是发布到 NPM 了。
npm publish
使用
别的开发者在使用你新发布的模块的时候可以这样导入
import MyComponent,{foo,bat} from 'react-component-example'
导入的直接是 ES5 代码，跳过编译从而避免了出现 Babel 版本不一致的问题，并且速度更快，是不是很棒！
不过假设你的模块包含很多组件，开发者可能只想用其中的一个或某几个，这时可以这样导入：
import MyComponent from 'react-component-example/src/MyComponent.jsx'
导入的是 ES6 代码，并且会被加入父级项目的编译过程。
‘拾’ jsx是javascript的一种语法扩展吗
对的，JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
如下(JS写法)
varchild1=React.createElement('li',null,'FirstTextContent');
varchild2=React.createElement('li',null,'SecondTextContent');
varroot=React.createElement('ul',{className:'my-list'},child1,child2);等价于(JSX写法)
varroot=(
<ulclassName="my-list">
<li>FirstTextContent</li>
<li>SecondTextContent</li>
</ul>
);
后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。另外，由于JSX只是一种语法，因此JavaScript的关键字class, for等也不能出现在XML中，而要如例子中所示，使用className, htmlFor代替，这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM。