Skip to content

Commit e53bab7

Browse files
author
Pavithra K
committed
Adds changes as per review comments
1 parent 29d166a commit e53bab7

File tree

1 file changed

+6
-8
lines changed

1 file changed

+6
-8
lines changed

content/how-to/shim.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
title: How to Shim Third party libraries?
2+
title: How to Shim Third Party Libraries?
33
---
44

5-
`webpack` as a module bundler can understand modules written as ES2015 modules, CommonJs or AMD. But many times, while using third party libraries, we see that they expect dependencies which are global aka `$` for `jquery`. They might also be creating global variables which need to be exported. Here we will see different ways to help webpack understand these __broken modules__.
5+
`webpack` as a module bundler can understand modules written as ES2015 modules, CommonJS or AMD. But many times, while using third party libraries, we see that they expect dependencies which are global aka `$` for `jquery`. They might also be creating global variables which need to be exported. Here we will see different ways to help webpack understand these __broken modules__.
66

77
### Prefer unminified src(CommonJs/AMD) files over bundled `dist` versions.
88

9-
Most modules link the `dist` version in the `main` field of their `package.json`. While this is useful for most developers, for webpack it is better to alias the src version because this way webpack is able to optimize dependencies better (e.g. when using the [DedupePlugin]()). However in most cases `dist` works fine as well.
9+
Most modules link the `dist` version in the `main` field of their `package.json`. While this is useful for most developers, for webpack it is better to alias the src version because this way webpack is able to optimize dependencies better (e.g. when using the [DedupePlugin](/concepts/plugins#DedupePlugin)). However in most cases `dist` works fine as well.
1010

1111
``` javascript
1212
// webpack.config.js
@@ -22,7 +22,7 @@ module.exports = {
2222
```
2323

2424
### ProvidePlugin
25-
The [ProvidePlugin]() makes a module available as a variable in every other module required by `webpack`. The module is required only if you use the variable.
25+
The [ProvidePlugin](/concepts/plugins#ProvidePlugin) makes a module available as a variable in every other module required by `webpack`. The module is required only if you use the variable.
2626
Most legacy modules rely on the presence of specific globals, like jQuery plugins do on `$` or `jQuery`. In this scenario, you can configure webpack to prepend `var $ = require(“jquery”)` everytime it encounters the global `$` identifier.
2727

2828
``` javascript
@@ -54,8 +54,6 @@ module: {
5454
}
5555
```
5656

57-
Another example,
58-
5957
There are modules that support different module styles, like AMD, CommonJS and legacy. However, most of the time they first check for `define` and then use some quirky code to export properties. In these cases, it could help to force the CommonJS path by setting `define = false`
6058

6159
```javascript
@@ -71,7 +69,7 @@ module: {
7169

7270
### `exports-loader`
7371

74-
Let's say a library creates a global variable that it expects it's consumers to use. In this case we can use [`exports-loader`](https://github.com/webpack/exports-loader), to export that global variable in commonjs format.
72+
Let's say a library creates a global variable that it expects it's consumers to use. In this case we can use [`exports-loader`](https://github.com/webpack/exports-loader), to export that global variable in CommonJS format.
7573

7674
```javascript
7775
module: {
@@ -89,7 +87,7 @@ module: {
8987

9088
### `scripts-loader`
9189

92-
The [scripts-loader]() evaluates code in the global context, just like you would add the code into a `script` tag. In this mode every normal library should work. require, module, etc. are undefined.
90+
The [scripts-loader](https://github.com/webpack/script-loader) evaluates code in the global context, just like you would add the code into a `script` tag. In this mode every normal library should work. require, module, etc. are undefined.
9391
Note: The file is added as string to the bundle. It is not minimized by `webpack`, so use a minimized version. There is also no dev tool support for libraries added by this loader.
9492

9593
```javascript

0 commit comments

Comments
 (0)