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: src/content/guides/author-libraries.md
+16-16Lines changed: 16 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -9,12 +9,12 @@ contributors:
9
9
- marioacc
10
10
---
11
11
12
-
webpack is a tool which can be used to bundle application code and also to bundle library code. If you are the author of a JavaScript library and are looking to streamline your bundle strategy then this document will help you with the differents webpack configurations to expose your libraries as you think convenient.
12
+
Aside from applications, webpack can also be used to bundle JavaScript libraries. The following guide is meant for library authors looking to streamline their bundling strategy..
13
13
14
14
15
15
## Authoring a Library
16
16
17
-
Let's assume that you are writing a small library ,`webpack-numbers`, allowing to convert numbers 1 to 5 from their numeric representation to the textual one and vice-versa, e.g.: 2 to 'two'.
17
+
Let's assume that you are writing a small library ,`webpack-numbers`, allowing to convert numbers 1 to 5 from their numeric representation to the textual one and vice-versa, e.g.: 2 to 'two'.
18
18
The basic project structure may look like this.
19
19
20
20
__project__
@@ -80,8 +80,8 @@ export function wordToNum(word) {
80
80
The usage specification for the library use will be as follows:
var webpackNumbers =require('webpack-numbers');//CommonJS module require
85
85
...
86
86
webpackNumbers.wordToNum('Two') //ES2015 and CommonJS module use
87
87
...
@@ -103,34 +103,34 @@ The consumer also can use the library loading it with the script tag:
103
103
<script>
104
104
...
105
105
/* Global variable */
106
-
webpackNumbers.wordToNum('Five')
106
+
webpackNumbers.wordToNum('Five')
107
107
/* Property in the window object */
108
-
window.webpackNumbers.wordToNum('Five')
108
+
window.webpackNumbers.wordToNum('Five')
109
109
//
110
110
...
111
111
</script>
112
112
</html>
113
113
```
114
114
115
-
The configurations also can expose the library in the next ways:
115
+
The configurations also can expose the library in the following ways:
116
116
117
117
- Property in the global object, for node.
118
-
- Property in the this object.
118
+
- Property in the `this` object.
119
119
120
120
121
121
For full library configuration and code please refer to [webpack-library-example](https://github.com/kalcifer/webpack-library-example)
122
122
123
123
124
124
## Configure webpack
125
125
126
-
Now the agenda is to bundle this library achieving the next goals:
126
+
Now the plan is to bundle this library achieving the next goals:
127
127
128
128
- Without bundling `lodash`, but requiring it to be loaded by the consumer using `externals`.
129
129
- Setting the library name as `webpack-numbers`.
130
130
- Exposing the library as a variable called `webpackNumbers`.
131
131
- Being able to access the library inside Node.js.s
132
132
133
-
Also, the consumer will be able to access` the library the `next ways:
133
+
Also, the consumer will be able to access the library the following ways:
134
134
135
135
- ES2015 module. i.e. `import webpackNumbers from 'webpack-numbers'`.
136
136
- CommonJS module. i.e. `require('webpack-numbers')`.
@@ -222,14 +222,14 @@ module.exports = {
222
222
};
223
223
```
224
224
225
-
W>At the moment of webpack 3.5.5, using the next configuration is not working properly as stated in the[issue 4824](https://github.com/webpack/webpack/issues/4824):
225
+
W> With webpack 3.5.5, using the following configuration doesn't work properly as stated in [issue 4824](https://github.com/webpack/webpack/issues/4824):
226
226
227
227
```javascript
228
228
module.exports= {
229
229
...
230
230
output: {
231
231
...
232
-
232
+
233
233
libraryTarget: {
234
234
root:'_'
235
235
}
@@ -244,7 +244,7 @@ W> However, you can set libraryTarget.var='_' to expect the library as a global
244
244
245
245
For widespread use of the library, we would like it to be compatible in different environments, i.e. CommonJS, AMD, Node.js and as a global variable.
246
246
247
-
To make your library available for reuse, add `library` property inside `output` in webpack configuration.
247
+
To make your library available for reuse, add the `library` property inside `output` in the webpack configuration.
248
248
249
249
__webpack.config.js__
250
250
@@ -259,7 +259,7 @@ module.exports = {
259
259
};
260
260
```
261
261
262
-
This makes your library bundle to be available as a global variable named `webpackNumbers` when imported. To make the library compatible with other environments, add `libraryTarget` property to the config. This will add the differents options about how the library can be exposed.
262
+
This makes your library bundle available as a global variable named `webpackNumbers` when imported. To make the library compatible with other environments, add `libraryTarget` property to the config. This will add the different options about how the library can be exposed.
263
263
264
264
__webpack.config.js__
265
265
@@ -275,14 +275,14 @@ module.exports = {
275
275
};
276
276
```
277
277
278
-
You can expose the library in the next ways:
278
+
You can expose the library in the following ways:
279
279
280
280
- Variable: as a global variable. Available in the `script` tag. i.e. `libraryTarget:'var'`.
281
281
- This: available trough the this object. i.e. `libraryTarget:'this'`.
282
282
- Window: available trough the `window` object, in the browser. i.e. `libraryTarget:'window'`.
283
283
- UMD: available after AMD or CommonJS `require`. i.e. `libraryTarget:'umd'`
284
284
285
-
If `library` is set and `libraryTarget` is not, `libraryTarget` defaults to `var` as specified in the [output configuration documentation](/configuration/output).
285
+
If `library` is set and `libraryTarget` is not, `libraryTarget` defaults to `var` as specified in the [output configuration documentation](/configuration/output).
286
286
See [`output.libraryTarget`](/configuration/output#output-librarytarget) there for a detailed list of all available options.
0 commit comments