『壹』 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。