# 使用 Babel
## 在 Node.js 使用 import 並讀取 React component
新增 .babelrc
```javascript
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
然後安裝
```
yarn add @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-react -D
```
> preset-env 整合了原本 es2015 等plugin，然後preset-react 用來轉 jsx 為 React.createElement
>
> babel-node 類似 babel-cli 不過 前者預先在執行前 compile presets and plugins
之後即可如下使用
test.js
```javascript
import React from 'react';
import Dialog from './component/Dialog';
console.log()
```
執行
```javascript
npx babel-node test.js
```
## babel-node
只會執行以下條件的編譯
* Rooted at the current working directory
* Not inside `node_modules` in the current working directory
## `babel-core/register`
> 1.我們在webpack寫入babel後可使用es6功能，但在entry file外就無法使用es6功能
> 2.Node.js的--harmony不包含module功能
1. 所以要在Node.js使用ES6 的export default 須另外寫一個.babelrc檔案
```
{
"presets": ["es2015"]
}
```
2.再於使用export default 的parent檔案，使用(require)\
`babel-core/register`
參考至:
### 第二種方法
```
babel-node server.js
```
將會自動轉有關import或相關ES6.7
### 於Production
不建議以上兩種做法，更好的做法參考以下連結\
因為babel-node或bable-register在runtime build
所以我們要先compile
```
npm install babel-cli -g
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-es2015
```
如果有react
```
npm install babel-preset-react --save
```
之後使用
```
babel src -d dist --presets es2015,stage-2,react --copy-files
```
lib為來源要compile 的server 檔案，dist為compile後會產生的資料夾
[https://github.com/babel/example-node-server\\#getting-ready-for-production-use](https://github.com/babel/example-node-server#getting-ready-for-production-use)
> 注意，css檔案不會被compile，所以如果是把整個資料夾compile裡面的css不會出現在compile後的資料夾
### 有關import 'babel-polyfill';
```
用來將node.js之外的ES6、7語法compile
```
不錯的文章
## 可直接加到html的polyfill
之後不用compile可直接使用ES6,7,8以上新功能