babel-plugin-system-import-transformer
Babel plugin that replaces import() & System.import() with the equivalent UMD pattern
Transforms
import'./utils/serializer'; // AND System;
to
{ var global = window; if typeof globaldefine === 'function' && globaldefineamd global; else if typeof module !== 'undefined' && moduleexports && typeof require !== 'undefined' || typeof module !== 'undefined' && modulecomponent && globalrequire && globalrequireloader === 'component' ; else ; };
Requirements
- Babel v7.x.x
Notes:
- for babel ^6.14.0 please use the v3.x.x releases.
- for babel <6.14 please use the v2.x.x releases.
- for babel v5 please use the v1.x.x releases.
Installation
npm install babel-plugin-system-import-transformer
Add "system-import-transformer" to your plugins
argument or inside the plugins
options of your Gruntfile
.
// in .babelrc "plugins": "system-import-transformer" // in grunt.jsbabel: options: plugins: "system-import-transformer"
Configuration
Relative paths and Aliases
The babel's getModuleId option (if defined) is used for the AMD and Global Module import.
babel: options: moduleIds: true { var files = 'src/utils/serializer': 'utilsSerializer' ; return filesmoduleName || moduleName; } plugins: 'system-import-transformer'
Options
commonJS
CommonJS specific options.
commonJS.useRequireEnsure
Type: Boolean
Values: [false
/true
]
When set to true
, all CommonJS import statements will use Webpack's require.ensure()
syntax. This enables dynamic module loading in CommonJS (Webpack) and works both for the UMD
and (of course) CommonJS
module target types.
"plugins": "system-import-transformer" "commonJS": "useRequireEnsure": true // the CommonJS code part will look like: { require;};
modules
Type: String
Values: [UMD
/amd
/common
]
Example
Specifies the target compilation module system. When set configured to an option other than UMD
then system-import-transformer
will omit the module type detection code and just insert the appropriate require statement wrapped with a Promise
.
// targeting AMD "plugins": "system-import-transformer" "modules": "amd" // will emit an AMD specific code like: { var global = window; global;};
// targeting CommonJS "plugins": "system-import-transformer" "modules": "common" // will emit a CommonJS specific code like: { ;};
syntax
Syntax specific options.
syntax.import
Type: Boolean
Values: [true
/false
]
Example
When set to false
, babel will not transpile import()
statements.
syntax["system-import"]
Type: Boolean
Values: [true
/false
]
Example
When set to false
, babel will not transpile System.import()
statements.