You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: es6-features/modulos.md
+79-7
Original file line number
Diff line number
Diff line change
@@ -12,8 +12,14 @@
12
12
2.`npm install --save-dev webpack@beta babel-loader babel-core babel-preset-es2015-native-modules` - Para instalar os pacotes.
13
13
3.`./node_modules/.bin/webpack --help` - Para consultar os comandos disponíveis do webpack.
14
14
4.`npm install --save-dev ramda` - Para instalar a biblioteca ramda que iremos usar como exemplo de `import/ export`
15
-
5. Crie um arquivo app.js com os dados abaixo:
16
-
> Importando todos os métodos da lib ramda
15
+
16
+
17
+
## Imports no ES6
18
+
19
+
> Serve para importar uma variável ou um método de uma lib para dentro do seu projeto.
20
+
21
+
1. Crie um arquivo app.js com os dados abaixo:
22
+
> Importando todos os métodos da lib ramda
17
23
```JS
18
24
// import método from 'biblioteca';
19
25
// * => carrega tudo da lib
@@ -29,7 +35,9 @@
29
35
console.log(arr3);
30
36
console.log(arr4);
31
37
```
32
-
> Importando um método específico da lib ramda, posso adicionar alias também ao método `{ union as unifica }`, posso chamar mais de um método específico ao mesmo tempo `{ union, uniq }`
38
+
39
+
> Importando um método específico da lib ramda, posso adicionar alias também ao método `{ union as unifica }`, posso chamar mais de um método específico ao mesmo tempo `{ union, uniq }`
40
+
33
41
```JS
34
42
// import método from 'biblioteca';
35
43
// { nome_do_metodo } => carrega apenas o método especificado da lib
@@ -44,7 +52,7 @@
44
52
console.log(arr3);
45
53
```
46
54
47
-
6. Crie um arquivo index.html com os dados abaixo:
55
+
2. Crie um arquivo index.html com os dados abaixo:
48
56
49
57
```HTML
50
58
<!DOCTYPE html>
@@ -61,7 +69,7 @@
61
69
</html>
62
70
```
63
71
64
-
7. Crie um arquivo `webpack.config.js` com as configurações abaixo:
72
+
3. Crie um arquivo `webpack.config.js` com as configurações abaixo:
65
73
66
74
```JS
67
75
constwebpack=require('webpack');
@@ -89,9 +97,9 @@
89
97
}
90
98
}
91
99
```
92
-
8. Crie um arquivo `.gitignore` e inclua nele as pastas/arquivos que você não quer que subam para o git, no nosso caso estamos a dicionando a pasa `node_modules/`
100
+
4. Crie um arquivo `.gitignore` e inclua nele as pastas/arquivos que você não quer que subam para o git, no nosso caso estamos a dicionando a pasa `node_modules/`
93
101
94
-
9. No um arquivo `package.json` configure os scripts conforme abaixo e depois execute no terminal `npm run build -- --watch` </br>
102
+
5. No um arquivo `package.json` configure os scripts conforme abaixo e depois execute no terminal `npm run build -- --watch` </br>
95
103
PS.: Você precisa está dentro da pasta onde criou o projeto.
96
104
97
105
```JSON
@@ -100,3 +108,67 @@ PS.: Você precisa está dentro da pasta onde criou o projeto.
100
108
"watch": "npm run build -- --watch"
101
109
},
102
110
```
111
+
112
+
## Exports no ES6
113
+
114
+
> Serve para exportar uma variável ou um método para que outros arquivos possam utilizar.
115
+
116
+
1. Crie um arquivo `utils.js` com os dados abaixo, será a biblioteca com métodos e variáveis que serão reutilizadas em outros arquivos.
117
+
118
+
```JS
119
+
functionsum(a, b) {
120
+
return a + b;
121
+
}
122
+
123
+
// método principal
124
+
// só pode ter um default por arquivo
125
+
// pode ser importado com qualquer nome
126
+
// não precisar ser chamado com as chaves
127
+
exportdefaultsum;
128
+
129
+
/*--------------------------------*/
130
+
131
+
exportfunctionsub(a, b) {
132
+
return a - b;
133
+
}
134
+
135
+
// named export
136
+
// permite ter vários exports dentro de um mesmo arquivo
137
+
// só pode chamar com o mesmo nome
138
+
// o import precisa das chaves { sub }
139
+
140
+
/*--------------------------------*/
141
+
142
+
functionmult(a, b) {
143
+
return a * b;
144
+
}
145
+
146
+
functiondiv(a, b) {
147
+
return a / b;
148
+
}
149
+
150
+
constPI=3.14;
151
+
152
+
export { multasmultiplicacao, div, PI };
153
+
154
+
// named export
155
+
// permite ter vários exports dentro de um mesmo arquivo
156
+
// só pode chamar com o mesmo nome
157
+
// o import precisa das chaves { sub }
158
+
159
+
```
160
+
161
+
2. Adicione os dados abaixo em app.js, para que possamos reutilizar os métodos/ variável do arquivo utils.JS
162
+
163
+
```JS
164
+
165
+
// importando métodos/variável de utils.JS
166
+
importsum, { sub, multiplicacao, divasdividir, PI } from'./utils';
0 commit comments