Simple question, I know, but googling has turned up nothing. I've recently been sold on simply omitting Babel transpilation in my projects. I don't have any business need to pander to pre-ES6 era browsers in this day and age!
How do I remove babel from my Nuxt project? Is it as simple as setting babel: false somewhere? My package.json is loaded with countless '#babel' packages, I'd love to find a clean way to just remove everything Babel-related.
How can I do it?
I guess that this option may help: https://babeljs.io/docs/en/options#ignore
So, you could probably try this as explained in the nuxt docs:
export default {
...
build: {
babel: {
babelrc: './.babelrc',
}
},
...
}
And into your .babelrc file, you may write
{
"ignore": [
"**/*"
]
}
Didn't tried it myself but it may be a working idea.
I set
build: {
babel: {
babelrc: false,
},
}
Related
I'm trying to bundle a library right now and Webpack doesn't seem to have an option for outputting as an ES6 module with output.libraryTarget. I see literally every option but ES6 listed in the documentation.
What's going on here? Am I misunderstanding how webpack works?
It's not implemented yet. See this issue.
You can use Rollup instead, but it expects all modules to be ESM.
With the latest Webpack V5 (as of September 2022), you can do this:
module.exports = {
entry: ["./src/index.ts"],
experiments: {
outputModule: true,
},
output: {
path: `${__dirname}/dist/myOutputFile.mjs`,
library: {
type: "module",
},
},
};
I also set devtool: false and used externals to keep things like React out of the bundle.
See https://github.com/webpack/webpack/issues/2933 (as mentioned in the other response) and https://webpack.js.org/configuration/output/#outputlibrarytype for more details.
I am using rollup to build my TypeScript sources. I want to remove comments ONLY, without any minification, in order to hot update code when debugging.
I have tried rollup-plugin-terser, it can remove comments but it will also minify my code somehow, I cannot completely disable the minification.
How can I do that? Thanks!
Like #jujubes answered in the comments, the rollup-plugin-cleanup will do the task. I want to expand a bit.
Three things:
Add ts to extensions list, like extensions: ["js", "ts"] — otherwise sources won't be processed, even if transpiling step typescript() is before it — I originally came here investigating why rollup-plugin-cleanup won't work on TS files and it was just ts extension missing 🤦♂️
code coverage is important; on default settings, this plugin would remove istanbul statements like /* istanbul ignore else */ so it's good to exclude them, comments: "istanbul",
removing console.log is a separate challenge which is done with #rollup/plugin-strip and it goes in tandem to rollup-plugin-cleanup. In my case, depending is it a "dev" or "prod" Rollup build (controlled by a CLI flag --dev, as in rollup -c --dev), I remove console.log on prod builds only. But comments are removed on both dev and prod builds.
currently, I use:
import cleanup from "rollup-plugin-cleanup";
...
{
input: "src/main.ts",
output: ...,
external: ...,
plugins: [
...
cleanup({ comments: "istanbul", extensions: ["js", "ts"] }),
...
Here's an example of rollup-plugin-cleanup being used my Rollup config, here's my Rollup config generator (in monorepos, Rollup configs are hard to maintain by hand so I generate them). If you decide to wire up --dev CLI flag, the gotcha is you have to remove the flag from the commandLineArgs before script ends, otherwise Rollup will throw, see the original tip and it in action.
You should be able to achieve this too with just rollup-plugin-terser. It bases on terser so more information it's actually available on its README, here is the part related to minification. So in your case this part of rollup.config.js should looks like:
plugins: [
terser({
// remove all comments
format: {
comments: false
},
// prevent any compression
compress: false
}),
],
Keep in mind, that you can also enable part of configuration for production only. So having declared production const in your rollup.config.js you can do like that:
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
plugins: [
production && terser({
// terser plugin config here
}),
],
};
I am trying to enable support for IE 11 in my application. However, some of my dependencies haven't transpiled the code to es5. Therefor, I tried added one of them to my rules, but it still doesn't transpile that dependency.
This is how I am including my dependency, this time being vue2-google-maps. However the produced code still contains Object.entries after running npm run dev.
mix.webpackConfig({
module: {
rules: [
{
test: /node_modules\/(vue2-google-maps)\/.+\.js$/,
use: [
{
loader: 'babel-loader',
options: mix.config.babel()
}
]
}
]
}
});
mix.js('resources/js/app.js', 'public/js')
.extract()
.babel(['public/js/manifest.js'], 'public/js/manifest.es5.js')
.babel(['public/js/vendor.js'], 'public/js/vendor.es5.js')
.babel(['public/js/app.js'], 'public/js/app.es5.js')
Here is a similar question, but the answer didn't help me yet. Here is another similar question, but there is no answer in that one.
Here is my .babelrc:
{
"presets": [
[
"#babel/preset-env",
{
"targets": { "ie": "10" }
}
]
]
}
What am I doing wrong? Why is not the dependency also transpiled?
Inspect your config with: mix.dump();
b/c your rules and test look good (helpful & worked for me in different scenario).
I'd give a try to mix.babelConfig(<your config>) - seems to be more explicit to me
I have read of issues with transpiling node_modules with Nuxt, but the new Nuxt 2 is said to have solved this with a transpile option in the nuxt.config.js file.
https://nuxtjs.org/api/configuration-build/#transpile
Here is what I have:
export default {
router: {
base: '/',
},
build: {
transpile: [
'choices.js',
'lazysizes',
'swiper',
'vee-validate'
],
extractCSS: true
},
srcDir: 'src/',
performance: {
gzip: true
},
render: {
compressor: {
threshold: 100
}
},
dev: false
}
I removed a few things that are unrelated to make it easier to read.
When I run npm run build (nuxt build) the compiled JS files contain references to es6 and es7 code such as const and let etc when it should be var.
I have isolated this issue to be coming from Swiper. It appears to internally depend on something called Dom7 that seems to be causing the problem.
I am wanting to compile these node_modules dependencies to es5 if possible. I'm not sure my current setup is actually doing anything at all in that regard.
I believe Nuxt uses vue-app for Babel, but I even tried the following to no success:
babel: {
presets: [
'#babel/preset-env'
],
plugins: [
'#babel/plugin-syntax-dynamic-import'
]
}
Not much joy there either. Nothing appears differently in the final build.
I am using Nuxt 2.1.0
Any help appreciated. Thanks!
You also need to transpile Dom7, so the Nuxt config should have:
build: {
transpile: [
'swiper',
'dom7',
],
}
I have the exact same issue.
The vendor option under build is deprecated, so it's simply ignored I believe from what I read here https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67#a688
I managed to isolate my case to the "swiper" library. If I remove that from my project, all references to let, const or class are gone. I've tried the transpile option too, but it does not seem to have any effect.
Will you try to exclude swiper from your project to see if we can isolate the issue?
I'm using babel 7.
In their docs they mention the new naming for plugin is with #babel/ prefix.
React-hot-loader babrlrc config recommendation is:
{
"plugins": ["react-hot-loader/babel"]
}
my .babelrc config is:
{
"presets": ["#babel/env", "#babel/react"],
"env": {
"development": {
"plugins": ["#babel/react-hot-loader"]
},
"production": {}
}
}
Is it correct to assume that #babel/react-hot-loader is correct definision?
I could not find any more docs about it.
Saying #babel/react-hot-loader will have babel look within itself for a plugin called react-hot-loader. From what I can tell the package/plugin you're trying to use is not maintained/owned by babel itself. Therefore #babel/react-hot-loader will not work. You should configure your .babelrc as per the documentation of the plugin you're trying to use.
I think this is the plugin you're referring to in your question: react-hot-loader
Follow these setup instructions: react-hot-loader/getting-started
you have to still use it as mentioned in react hot reloader docs. below is the link
https://github.com/gaearon/react-hot-loader#user-content-add-babel-before-typescript
I don't think so, react-hot-loader does not update there docs for prefix definition and I also found there given example
https://github.com/gaearon/react-hot-loader/blob/master/examples/typescript/.babelrc
Using babel 7 prefix for other plugins but for react-hot-loader still the same
{
"plugins": [
"#babel/plugin-syntax-typescript",
"#babel/plugin-syntax-decorators",
"#babel/plugin-syntax-jsx",
"react-hot-loader/babel"
]
}