I create a Vue 2 project by Vue-Cli 5, then I want to remove "use strick" in the complied code.
As I Know, the #babel/plugin-transform-strick-mode may be enabled via #babel/plugin-transform-modules-commonjs, and the plugin is included in #babel/preset-env under the modules option.
But the Vue-Cli used a preset #vue/babel-preset-app by a plugin #vue/cli-plugin-babel for babel.
So my question is How pass strictMode: false as an option to the transform-modules-commonjs by #vue/babel-preset-app which preset is in the #vue/cli-plugin-babel ?
module.exports = {
presets: [["#vue/cli-plugin-babel/preset", { modules: "auto" }]],
plugins: [
// I tried this way, but it throw many errors like:
/**
ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32
Module not found: Error: Can't resolve 'stream' in 'D:\workspace\cqset_offical_website\node_modules\axios\dist\node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
*/
["#babel/plugin-transform-modules-commonjs", {}],
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
Related
I am working on a legacy project which uses RequireJs to load and resolve all the dependencies. It works fine on modern browsers, but i need to add support for IE11.
I tried to use babel 7 with #babel/preset-env with following .babelrc
{
"presets": [
["#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers" : ["ie>=11"]
},
"modules": false
}]
],
"compact": false
}
the import statements injected by the preset as following
import "core-js/modules/es.function.name.js";
cause error "import statements can't be used outside a module". Even when I use modules: "amd", then core-js is imported as
define(["core-js/modules/es.array.filter.js", "core-js/modules/es.object.to-string.js", "core-js/modules/es.string.includes.js", "core-js/modules/es.function.name.js", "core-js/modules/es.regexp.exec.js", "core-js/modules/es.string.split.js", "core-js/modules/es.string.small.js", "core-js/modules/es.string.search.js"], function (_esArrayFilter, _esObjectToString, _esStringIncludes, _esFunctionName, _esRegexpExec, _esStringSplit, _esStringSmall, _esStringSearch) {
"use strict";
//...
});
which throws error like "define is not defined in require.js".
When using useBuiltIns: "entry", and then including core-js as
require(["core-js", ../other modules], function(corejs, ...){
}
)
in the main.js file, it fails to correctly resolve the path of the files even though I have included the path to core-js in require.config.paths.
I tried #babel/runtime and #babel/plugin-transform-runtime but no luck there.
So my question is what would be the best way to add babel and the required polyfills in my RequireJs project so that it is compatible with IE 11?
I've recently added #babel/helper-annotate-as-pure to my list of babel plugins:
require('babel-plugin-macros'),
require('#babel/helper-annotate-as-pure').default,
require('babel-plugin-dev-expression'),
[
require('#babel/plugin-proposal-class-properties').default,
{
loose: true,
},
],
[require('#babel/plugin-proposal-decorators').default, { legacy: true }],
require('#babel/plugin-proposal-numeric-separator').default,
[
require('#babel/plugin-transform-runtime').default,
{
corejs: false,
helpers: true,
version: require('#babel/runtime/package.json').version,
regenerator: true,
useESModules: moduleFormat === 'esm',
} as RuntimeOptions,
],
require('#babel/plugin-syntax-dynamic-import').default,
require('#babel/plugin-proposal-optional-chaining').default,
require('#babel/plugin-proposal-nullish-coalescing-operator').default,
isDevelopment && require.resolve('react-refresh/babel'),
I previously used 'babel-plugin-annotate-pure-calls' but after adding the plugin I continually get the same error at different points:
Plugin/Preset did not return an object
If I comment out the plugin, everything works
#babel/helper-annotate-as-pure is a helper utility module that is part of Babel itself, it is not a plugin, so it cannot be used in the plugins array. All plugins in the #babel namespace start with plugin- in their name.
You'd have to see if babel-plugin-annotate-pure-calls, the original plugin you used, works properly.
I like how I can use http://browserl.ist/ to see what browsers the targets query will target in #babel/preset-env.
Is there any similar tools to list what Babel plugins (transforms etc.) the env preset actually includes?
I'm using Webpack as my bundler if it matters.
try add debug:true in #babel/preset-env options, it will list all plugin in use
{
"presets": [
[
"#babel/preset-env",
{
"debug": true,
"targets": {
"chrome": 49,
"firefox": 64,
"safari": 9,
"edge": 13,
"ios": 9
}
}
]
]
}
You can always check out the source for #babel/preset-env, namely the available-plugins.js file lists the available plugins in the preset.
It's just a simple config in your .babelrc or babel.config.js file.
"#babel/preset-env",
{
useBuiltIns: "usage",
debug: true, // this will make babel output actual transform plugins and polyfills in terminal
targets: {
chrome: "53",
},
corejs: 3,
},
But this will not work when you use webpack
As pointed out by #rabidpug, available-plugins.js lists all plugins.
However, which ones are being used depend on your config.
E.g.:
The shippedProposals config option is false by default. As per index.js, this already eliminates all files as listed in data/shipped-proposals.js.
Similarly, the recently added bugfixes option adds more plugins (until babel#8 comes along), listed in #babel/compat-data/plugin-bugfixes.
Solution
Luckily, preset-env has a debug option that just prints out all plugins used when the preset is invoked.
Just add debug to your preset-env options and it will list all plugins (and more).
For convinience, I wrote this little script that independently debugs your plugins list (given a custom set of preset-env options). Run it using node list-preset-env-plugins.js in a folder where you have babel installed:
// list-preset-env-plugins.js
const babelCore = require('#babel/core');
const presetEnv = require('#babel/preset-env').default;
/**
* Your preset-env options.
* #see https://babeljs.io/docs/en/babel-preset-env#options
*/
const presetEnvOptions = {
shippedProposals: true,
debug: true
};
/**
* #see https://github.com/babel/babel/blob/master/packages/babel-helper-plugin-utils/src/index.js
*/
const apiStub = {
version: babelCore.version,
assertVersion() { }
};
// invoke the preset
presetEnv(apiStub, presetEnvOptions);
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}
I tried to use following babelrcs:
{
"presets": [
["es2015", { "transform-es2015-modules-commonjs": { "loose": true } }]
]
}
fails with "Invalid options type for foreign"
{
"presets": ["es2015"],
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }]
]
}
ignores the "loose" option
{
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }]
]
}
does not use the preset
By enabling es2015, you are asking for non-loose-mode modules. If you want loose module modes in Babel v6 (at least at the moment), you would need to explicitly list the plugins you wish to use by listing everything that is part of es2015.
I ended up creating a preset es2015-mod for this same purpose - an exact copy of Babel's es2015 with loose modules enabled.
babel-preset-es2015-loose package has been deprecated. With babel-preset-es2015 v6.13.0+, you can now configure your .babelrc like so:
{ presets: [ ["es2015", {"loose": true}] ] }
For me it was an old babel-core version. You need at least 6.13+
NEW: Using es2015-loose preset
es2015-loose is a preset that uses modify-babel-preset to modify es2015 preset and enable loose mode where available.
Use it like that:
{
"presets": ["es2015-loose"]
}
Make sure to install both es2015 and es2015-loose packages:
$ npm install --save-dev babel-preset-es2015-loose babel-preset-es2015
PS: There are other loose presets for example if you target node versions >= 4 you can use es2015-node4-loose preset.