Recently I've learned how to add babel to my webpack configuration.
I use react with typescript
I read tons of tutorial and each tutorial did different things
I used awesome-typescript-loader to load typescript. I noticed that without babel, webpack automatically transformed my code from es6 (arrow function) to es5 (which should be the responsiblity of babel).
So my question is that if I config babel, how do I know if my babel works or not?
Related
I've been trying out different project configurations, and I want to move all babel configuration to webpack config file. Here, I bundled up the demo, but sadly I could not make it run there, but it will work if you deploy it locally (I hope I didn't miss anything). As you can see, the webpack rule for babel from demo.config.js is the same as the contents of babel.config.js file, but when I remove babel file and try to run it, it prompts the following error:
import webpack from 'webpack';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've seen many different configurations to make it work without babel config file, using ts-loader for example:
What is causing my tsx to render properly without babel in react app?
Demo for React Reload Replacement Plugin
Webpack base configuration for Trezor Suite build package
What am I missing here?
And one more question, is there a way to use TypeScript extension for webpack configuration file demo.config.js?
I've been immersing myself in react recently and have a question about react+scss.
I understand the difference between babel and webpack and their respective purpose when getting a react app to work in the browser. What I still don't understand is what's needed if I'm just trying to create a react npm package for react components.
My package at first only had a pure javascript/react component and I simply transpiled it with babel to commonJS, worked well. No webpack needed. I then added an additional component that now included scss:
import styles from '../styles/calendar.scss'
In package.json I added
"sass-loader" and "node-sass"
In storybook, everything works, but when I transpile my src directory with babel, the scss/css code is missing, which is obviously expected as babel is just a js transpiler.
My question is whether I really need webpack to get the scss in my react package working or if there is a way to do that purely with babel since so far I had no need for webpack. Babel transpile gave me nicely transpiled js files that still respected the folder structure of my src folder. I ideally don't want a completely bundled index.js file that has all in one.
Bottom line question, do you need more than pure babel as soon as you're dealing with scss?
Any help would be appreciated!
As far as I know, yes. You need more than just Babel if you want to deal with SCSS. The reason is that Babel is JavaScript compiler, which means it only compile JavaScript. For SCSS and other purpose, you need a bundler like Webpack.
I'm using Storybook to develop & test my components in isolation. I use typescript, babel, etc.
Everything works like a charm.
Now I want to compile my components as ES5 library (commonJS) and provide it to my other outer projects.
Basically storybook build command makes a whole storybook as a static website but I need the compiled components library.
The main problem here is that the storybook has some dependencies in node_modules that are ES6 modules, so babel configured to proceed them while Typescript handles my own components.
So I can't just use tsc etc. to compile my components eg components folder because typescript won't fetch and compile the dependencies from node_modules. They should be compiled to ES5, otherwise, any of my outer projects, that need to use compiled storybook components, won't be able to handle them.
Also, webpack has it's own aliases, so the whole tools zoo should be used during the deployment.
How to do it in the case of Storybook?
Should I install the webpack, etc. manually into the storybook and configure a deploy process separated of the storybook?
Can I just use the webpack of the storybook? (Because I've already configured it with Babel and Typescript).
Thanks for any help!
An alternative way here - is using babel-cli and only transpile your components as a set of files
Example of the command:
npx babel src -d lib/ --copy-files
The link to the Babel CLI: https://babeljs.io/docs/en/babel-cli
AFAIK, the configuration can include the typescript plugin
We have a React web app written in Typescript that works fine and targets ES6 in the tsconfig.json file.
Now we want to minify it with Uglifyjs after compiling to deploy to production. That fails because Uglify supports only ES5 (even the #harmony branch, I tried that already).
So I need the webpack output to be ES5. But when I set "target": "es5" in our tsconfig file the webpack compilation fails saying: Unexpected token (164:41)
You may need an appropriate loader to handle this file type.
How can we target ES5 in Typescript with React so that it works?
Attached a screenshot of the error:
The answer is, you can't.
Babel can transpile ES7 to ES6. But it can't transpile ES6 to ES5, for that it uses a polyfill (.js library loaded in the browser).
Thus, because you cannot get ES5 from your source code, you cannot use Uglify.
You'll have to rely on gzipping alone (which is a substantial size decrease).
I am currently having trouble with module transpilation with babel.
when I am transpiling code to AMD modules with babel, I can make it work in browser by including requirejs library. But when I try to introduce react to this equation we are experiencing some troubles, as react does not play nice with AMD. we are having mismatch errors (http://requirejs.org/docs/errors.html#mismatch) cause react is loaded synchronously in a vendor.js file.
if I tried the other way around, using commonjs as it is the default module spec that babel uses, I have no idea how to make it work in the browser. without a library like requirejs in the former example, browser is giving errors like "exports not defined". tried to include some stuff like es6-module-loader or babel browerser polyfill, but without much success.
ps: build flow is using broccolijs.
it seems like the answer is in the webpack. after using babel to transpile code to es5 in broccoli, I used broccoli webpack plugin to make transpiled code browser ready.