Socket
Socket
Sign inDemoInstall

imports-loader

Package Overview
Dependencies
Maintainers
10
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

imports-loader - npm Package Compare versions

Comparing version 0.8.0 to 1.0.0

dist/cjs.js
dist/index.js
dist/options.json
dist/utils.js

31

CHANGELOG.md

@@ -1,5 +0,34 @@

# Change Log
# Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [1.0.0](https://github.com/webpack-contrib/imports-loader/compare/v0.8.0...v1.0.0) (2020-06-17)
### ⚠ BREAKING CHANGES
* minimum supported Node.js version is `10.13`
* minimum supported `webpack` version is `4`
* `inline` syntax was changed, please [read](https://github.com/webpack-contrib/imports-loader#inline)
* list of imported modules moved to the `imports` option, please [read](https://github.com/webpack-contrib/imports-loader#imports)
* wrapper moved to the `wrapper` option, please [read](https://github.com/webpack-contrib/imports-loader#wrapper)
* custom variables moved to the `additionalCode` option, please [read](https://github.com/webpack-contrib/imports-loader#additionalcode)
* generates ES module default import by default (`import Foo from 'foo';`)
### Features
* validate options
* support webpack 5
* implemented the `type` option (imports can be CommonsJS or ES module format)
* implemented the ability to generate multiple import in CommonJS or ES module format
* improved support of `inline` usage
* allowed to adding arguments for wrapper
* allowed to inject any custom code
### Bug Fixes
* do not crash on invalid inline syntax
* respect `'use strict';`
<a name="0.8.0"></a>

@@ -6,0 +35,0 @@ # [0.8.0](https://github.com/webpack-contrib/imports-loader/compare/v0.7.1...v0.8.0) (2018-02-20)

79

package.json
{
"name": "imports-loader",
"version": "0.8.0",
"version": "1.0.0",
"description": "imports loader module for webpack",
"license": "MIT",
"repository": "webpack-contrib/imports-loader",
"author": "Tobias Koppers @sokra",
"license": "MIT",
"homepage": "https://github.com/webpack-contrib/imports-loader",
"bugs": "https://github.com/webpack-contrib/imports-loader/issues",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"main": "dist/cjs.js",
"engines": {
"node": ">= 4"
"node": ">= 10.13.0"
},
"scripts": {
"start": "npm run build -- -w",
"clean": "del-cli dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
"commitlint": "commitlint --from=master",
"security": "npm audit",
"lint:prettier": "prettier --list-different .",
"lint:js": "eslint --cache .",
"lint": "npm-run-all -l -p \"lint:**\"",
"test:only": "cross-env NODE_ENV=test jest",
"test:watch": "npm run test:only -- --watch",
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
"pretest": "npm run lint",
"test": "npm run test:coverage",
"prepare": "npm run build",
"release": "standard-version",
"defaults": "webpack-defaults"
},
"files": [
"index.js"
"dist"
],
"scripts": {
"test": "mocha",
"travis:test": "npm run -s test",
"release": "standard-version"
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
},
"dependencies": {
"loader-utils": "^1.0.2",
"source-map": "^0.6.1"
"loader-utils": "^2.0.0",
"schema-utils": "^2.7.0",
"source-map": "^0.6.1",
"strip-comments": "^2.0.1"
},
"devDependencies": {
"mocha": "^3.1.2",
"should": "^11.1.1",
"standard-version": "^4.3.0"
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"@webpack-contrib/defaults": "^6.3.0",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^26.0.1",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"del": "^5.1.0",
"del-cli": "^3.0.1",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"husky": "^4.2.5",
"jest": "^26.0.1",
"lint-staged": "^10.2.9",
"memfs": "^3.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.5",
"standard-version": "^8.0.0",
"webpack": "^4.43.0"
},
"homepage": "https://github.com/webpack-contrib/imports-loader",
"repository": "https://github.com/webpack-contrib/imports-loader",
"bugs": "https://github.com/webpack-contrib/imports-loader/issues"
"keywords": [
"webpack"
]
}

705

README.md

@@ -1,144 +0,659 @@

[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![chat][chat]][chat-url]
<div align="center">
<!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
<a href="https://github.com/webpack/webpack">
<img width="200" height="200" vspace="" hspace="25"
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
</a>
<h1>Imports Loader</h1>
<p>The imports loader allows you to use modules that depend on specific global variables.<p>
</div>
This is useful for third-party modules that rely on global variables like `$` or `this` being the `window` object. The imports loader can add the necessary `require('whatever')` calls, so those modules work with webpack.
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]
<h2 align="center">Install</h2>
# imports-loader
```bash
npm install imports-loader
The imports loader allows you to use modules that depend on specific global variables.
This is useful for third-party modules that rely on global variables like `$` or `this` being the `window` object.
The imports loader can add the necessary `require('whatever')` calls, so those modules work with webpack.
For further hints on compatibility issues, check out [Shimming](https://webpack.js.org/guides/shimming/) of the official docs.
> ⚠ By default loader generate ES module named syntax.
> ⚠ Be careful, existing imports (`import`/`require`) in the original code and importing new values can cause failure.
## Getting Started
To begin, you'll need to install `imports-loader`:
```console
$ npm install imports-loader --save-dev
```
<h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
Given you have this file:
Given you have this file `example.js`
**example.js**
```javascript
$("img").doSomeAwesomeJqueryPluginStuff();
```js
$('img').doSomeAwesomeJqueryPluginStuff();
```
then you can inject the `$` variable into the module by configuring the imports-loader like this:
Then you can inject the `jquery` value into the module by configuring the `imports-loader` using two approaches.
``` javascript
require("imports-loader?$=jquery!./example.js");
### Inline
**index.js**
```js
import myLib from 'imports-loader?imports=default%20jquery%20$!./example.js';
// `%20` is space in a query string, equivalently `default jquery $`
// Adds the following code to the beginning of example.js:
//
// import $ from "jquery";` to `example.js
```
This simply prepends `var $ = require("jquery");` to `example.js`.
```js
import myLib from 'imports-loader?imports[]=default%20jquery%20$&imports[]=angular!./example.js';
// `%20` is space in a query string, equivalently `default jquery $` and `angular`
// Adds the following code to the beginning of example.js:
//
// import $ from "jquery";
// import angular from "angular";
```
### Syntax
```js
import myLib from 'imports-loader?imports[]=named%20library%20myMethod&imports[]=angular!./example.js';
// `%20` is space in a query string, equivalently `default jquery $` and `angular`
// Adds the following code to the beginning of example.js:
//
// import { myMethod } from "library";
// import angular from "angular";
```
Query value | Equals
------------|-------
`angular` | `var angular = require("angular");`
`$=jquery` | `var $ = require("jquery");`
`define=>false` | `var define = false;`
`config=>{size:50}` | `var config = {size:50};`
`this=>window` | `(function () { ... }).call(window);`
```js
const myLib = require(`imports-loader?type=commonjs&imports[]=single%20jquery%20$&imports[]=angular!./example.js`);
// `%20` is space in a query string, equivalently `single jquery $` and `angular`
// Adds the following code to the beginning of example.js:
//
// var $ = require("jquery");
// var angular = require("angular");
```
### Multiple values
```js
const myLib = require(`imports-loader?type=commonjs&imports=single%20myLib%20myMethod&&wrapper=window&!./example.js`);
// `%20` is space in a query string, equivalently `single jquery $` and `angular`
// Adds the following code to the example.js:
//
// const myMethod = require('myLib');
//
// (function () {
// ...
// Code
// ...
// }.call(window));
```
Multiple values are separated by comma `,`:
### Using Configuration
```javascript
require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
// You can use `regexp`
// test: /example\.js/$
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: [
'default jquery $',
'default lib_2 lib_2_default',
'named lib_3 lib2_method_1',
'named lib_3 lib2_method_2 lib_2_method_2_short',
'namespace lib_4 my_namespace',
'side-effects lib_5',
{
syntax: 'default',
moduleName: 'angular',
name: 'angular',
},
],
},
},
],
},
],
},
};
```
### webpack.config.js
Generate output:
As always, you should rather configure this in your `webpack.config.js`:
```js
import $ from 'jquery';
import lib_2_default from 'lib_2';
import { lib2_method_1, lib2_method_2 as lib_2_method_2_short } from 'lib_3';
import * as my_namespace from 'lib_4';
import 'lib_5';
import angular from 'angular';
```
```javascript
// ./webpack.config.js
And run `webpack` via your preferred method.
## Options
| Name | Type | Default | Description |
| :-------------------------------------: | :---------------------------------------: | :---------: | :--------------------------------------------------------------------- |
| **[`type`](#type)** | `{String}` | `module` | Format of generated imports |
| **[`imports`](#imports)** | `{String\|Object\|Array<String\|Object>}` | `undefined` | List of imports |
| **[`wrapper`](#wrapper)** | `{Boolean\|String\|Object}` | `undefined` | Closes the module code in a function (`(function () { ... }).call();`) |
| **[`additionalCode`](#additionalcode)** | `{String}` | `undefined` | Adds custom code |
### `type`
Type: `String`
Default: `module`
Format of generated exports.
Possible values - `commonjs` (CommonJS module syntax) and `module` (ES module syntax).
#### `commonjs`
**webpack.config.js**
```js
module.exports = {
...
module: {
rules: [
{
test: require.resolve("some-module"),
use: "imports-loader?this=>window"
}
]
}
module: {
rules: [
{
test: require.resolve('example.js'),
loader: 'imports-loader',
options: {
syntax: 'default',
type: 'commonjs',
imports: 'Foo',
},
},
],
},
};
```
<h2 align="center">Typical Use Cases</h2>
Generate output:
### jQuery plugins
```js
var Foo = require('Foo');
`imports-loader?$=jquery`
// ...
// Code
// ...
```
### Custom Angular modules
#### `module`
`imports-loader?angular`
**webpack.config.js**
### Disable AMD
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
loader: 'imports-loader',
options: {
type: 'module',
imports: 'Foo',
},
},
],
},
};
```
There are many modules that check for a `define` function before using CommonJS. Since webpack is capable of both, they default to AMD in this case, which can be a problem if the implementation is quirky.
Generate output:
Then you can easily disable the AMD path by writing
```js
import Foo from 'Foo';
```javascript
imports-loader?define=>false
// ...
// Code
// ...
```
For further hints on compatibility issues, check out [Shimming Modules](http://webpack.github.io/docs/shimming-modules.html) of the official docs.
### `imports`
<h2 align="center">Maintainers</h2>
Type: `String|Object|Array<String|Object>`
Default: `undefined`
<table>
<tbody>
<tr>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150">
</br>
<a href="https://github.com/bebraw">Juho Vepsäläinen</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150">
</br>
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150">
</br>
<a href="https://github.com/SpaceK33z">Kees Kluskens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150">
</br>
<a href="https://github.com/TheLarkInn">Sean Larkin</a>
</td>
</tr>
<tbody>
</table>
List of imports.
#### `String`
Allows to use a string to describe an export.
##### `Syntax`
String values let you specify import `syntax`, `moduleName`, `name` and `alias`.
String syntax - `[[syntax] [moduleName] [name] [alias]]`, where:
- `[syntax]`:
- if `type` is `module`- can be `default`, `named`, `namespace` or `side-effects`
- if `type` is `commonjs`- can be `single`, `multiple` or `pure`
- `[moduleName]` - name of an imported module (**required**)
- `[name]` - name of an imported value (**required**)
- `[alias]` - alias of an imported value (**may be omitted**)
Examples:
If type `module`:
- `[Foo]` - generates `import Foo from "Foo";`.
- `[default Foo]` - generates `import Foo from "Foo";`.
- `[default ./my-lib Foo]` - generates `import Foo from "./my-lib";`.
- `[named Foo FooA]` - generates `import { FooA } from "Foo";`.
- `[named Foo FooA Bar]` - generates `import { FooA as Bar } from "Foo";`.
- `[namespace Foo FooA]` - generates `import * as FooA from "Foo";`.
- `[side-effects Foo]` - generates `import "Foo";`.
If type `commonjs`:
- `[Foo]` - generates `const Foo = require("Foo");`.
- `[single Foo]` - generates `const Foo = require("Foo");`.
- `[single ./my-lib Foo]` - generates `const Foo = require("./my-lib");`.
- `[multiple Foo FooA Bar]` - generates `const { FooA: Bar } = require("Foo");`.
- `[pure Foo]` - generates `require("Foo");`.
> ⚠ You need to set `type: "commonjs"` to use `single`, `multiple` and `pure` syntaxes.
> ⚠ Aliases can't be used together with `default`, `namespace`, `side-effects`, `single` and `pure` syntaxes.
###### Examples
###### ES Module Default Import
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('./path/to/example.js'),
loader: 'imports-loader',
options: {
imports: 'default lib myName',
},
},
],
},
};
```
Generate output:
```js
import myName from 'lib';
// ...
// Code
// ...
```
###### CommonJS Single Import
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('./path/to/example.js'),
loader: 'imports-loader',
options: {
type: 'commonjs',
exports: 'single lib myName',
},
},
],
},
};
```
Generate output:
```js
var myName = require('lib');
// ...
// Code
// ...
```
#### `Object`
Allows to use an object to describe an import.
Properties:
- `syntax`:
- if `type` is `module`- can be `default`, `named`, `namespace` or `side-effects`
- if `type` is `commonjs`- can be `single`, `multiple` or `pure`
- `moduleName` - name of an imported module (**required**)
- `name` - name of an imported value (**required**)
- `alias` - alias of an imported value (**may be omitted**)
> ⚠ Alias can't be used together with `default`, `namespace`, `side-effects`, `single` and `pure` syntaxes.
##### Examples
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: {
syntax: 'named',
moduleName: 'lib_2',
name: 'lib2_method_2',
alias: 'lib_2_method_2_alias',
},
},
},
],
},
],
},
};
```
Generate output:
```js
import { lib2_method_2 as lib_2_method_2_alias } from 'lib_2';
// ...
// Code
// ...
```
#### `Array`
Allow to specify multiple imports.
Each item can be a [`string`](https://github.com/webpack-contrib/imports-loader#string) or an [`object`](https://github.com/webpack-contrib/imports-loader#object).
##### Examples
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: [
{
moduleName: 'angular',
},
{
syntax: 'default',
moduleName: 'jquery',
name: '$',
},
'default lib_2 lib_2_default',
'named lib_2 lib2_method_1',
'named lib_2 lib2_method_2 lib_2_method_2_alias',
'namespace lib_3 lib_3_all',
'side-effects lib_4',
],
},
},
],
},
],
},
};
```
Generate output:
```js
import angular from 'angular';
import $ from 'jquery';
import lib_2_default from 'lib_2';
import { lib2_method_1, lib2_method_2 as lib_2_method_2_alias } from 'lib_2';
import * as lib_3_all from 'lib_3';
import 'lib_4';
// ...
// Code
// ...
```
### `wrapper`
Type: `Boolean|String|Object`
Default: `undefined`
Closes the module code in a function with a given `thisArg` and `args` (`(function () { ... }).call();`).
> ⚠ Do not use this option if source code contains ES module import(s)
#### `Boolean`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: {
moduleName: 'jquery',
name: '$',
},
wrapper: true,
},
},
],
},
],
},
};
```
Generate output:
```js
import $ from 'jquery';
(function () {
// ...
// Code
// ...
}.call());
```
#### `String`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: {
moduleName: 'jquery',
name: '$',
},
wrapper: 'window',
},
},
],
},
],
},
};
```
Generate output:
```js
import $ from 'jquery';
(function () {
// ...
// Code
// ...
}.call(window));
```
#### `Object`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: {
moduleName: 'jquery',
name: '$',
},
wrapper: {
thisArg: 'window',
args: ['myVariable', 'myOtherVariable'],
},
},
},
],
},
],
},
};
```
Generate output:
```js
import $ from 'jquery';
(function (myVariable, myOtherVariable) {
// ...
// Code
// ...
}.call(window, myVariable, myOtherVariable));
```
### `additionalCode`
Type: `String`
Default: `undefined`
Adds custom code.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: require.resolve('example.js'),
use: [
{
loader: 'imports-loader',
options: {
imports: {
moduleName: 'jquery',
name: '$',
},
additionalCode: 'var myVariable = false;',
},
},
],
},
],
},
};
```
Generate output:
```js
import $ from 'jquery';
var myVariable = false;
// ...
// Code
// ...
```
## Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.
[CONTRIBUTING](./.github/CONTRIBUTING.md)
## License
[MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/imports-loader.svg
[npm-url]: https://npmjs.com/package/imports-loader
[npm-url]: https://www.npmjs.com/package/imports-loader
[node]: https://img.shields.io/node/v/imports-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/imports-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/imports-loader
[tests]: https://github.com/webpack-contrib/imports-loader/workflows/imports-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/imports-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/imports-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/imports-loader
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
[test]: http://img.shields.io/travis/webpack-contrib/imports-loader.svg
[test-url]: https://travis-ci.org/webpack-contrib/imports-loader
[size]: https://packagephobia.now.sh/badge?p=imports-loader
[size-url]: https://packagephobia.now.sh/result?p=imports-loader
index.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc