> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_advance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_advance/importexport_module_exports_mo_zu_hua.md).

# JS 模組化

## import\_export\_module.exports 模組化

參考至

<http://www.2ality.com/2014/09/es6-modules-final.html>

<http://es6.ruanyifeng.com/#docs/module>

在webpack中可混用，一起用

## ES6 module

```
 //------ lib.js ------
    export sqrt = Math.sqrt;

    //------ main.js ------
    import  sqrt  from 'lib';
```

想一次import所有export過的東西

```
 import * as lib from 'lib';
```

舉例:

```
export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  };
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  };
}
```

傳回的東西是一個物件

```
import * as TodoActionCreators from './TodoActionCreators';
console.log(TodoActionCreators);
// {
//   addTodo: Function,
//   removeTodo: Function
// }
```

## CommonJS

```
exports.foo = function () { ... };

module.exports = config;

var a = require('a');
```

## 使用import的格式

```
import {Hello} from './component.jsx';
```

但為什麼react在webpack可以用?

```
import React from 'react';
import ReactDOM from 'react-dom';
```

(因為react是用 module.exports 進行輸出)

## 結論

1\.

```
module.exports = class Hello extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
}
```

or

```
export default class extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
```

配上

```
import Hello from './component.jsx';
```

2\.

```
exports.Hello = class Hello extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
```

or

```
export class Hello extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
```

配上

```
import {Hello} from './component.jsx';
```

## 使用require

```
module.exports = class Hello extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
```

```
var Helloo = require('./component.jsx');
function main() {
    ReactDOM.render(<Helloo />, document.getElementById('app'));
}
```

## 有關react引入jsx

使用commonjs的寫法require時

```
function main() {
    ReactDOM.render(<Hllo />, document.getElementById('app'));
}
```

其中是指向

```
var hllo = require('aaa.jsx')
```

也就是指向命名的var跟你原本元件的名稱沒關係

所以如果你想在一個jsx寫入多個元件會較麻煩，需要使用多個jsx檔案每個寫一個元件，再全部require到一個主jsx內

### 所以推薦使用ES6的import，下面hllo直接指到目標檔案的元件名稱，所以可以在一個jsx檔案內放多個元件

```
 import {Hllo} from './component.jsx';

main();

function main() {
    ReactDOM.render(<Hllo />, document.getElementById('app'));
}
```

```
export class Hello extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
};

export class Hllo extends React.Component {
  render() {
    return <h1 style={style1}>Hello,{this.props.name}</h1>;
  }
}
export class Hllo extends React.Component {
  render() {
    return <h1 style={style1}>Hello,{this.props.name}</h1>;
  }
}
```

原因是ES6的import可以使用{}如果使用會直接引入檔案內的object，如果沒用則是引入export default 或module.exports的檔案

## 或是使用ES6 的exports 記得 require後加上  ".屬性"

```
import React from 'react';

var style1 = {
  background: 'yellow'
};

exports.a =  class Hello extends React.Component {
  render() {
    return <h1 style={style1}>Hello world,{this.props.name}</h1>;
  }
};
exports.b =  class Hello extends React.Component {
  render() {
    return <h1 style={style1}> world,{this.props.name}</h1>;
  }
};
```

```
import React from 'react';
import ReactDOM from 'react-dom';
var Hello = require('./component.jsx').b;
main();
console.log(Hello);
function main() {
    ReactDOM.render(<Hello />, document.getElementById('app'));
}
```