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.
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.
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?
I have a library written in ES6/JSX and want to install it using npm install on a create-react-app application. How can I force babel to parse this lib from node_modules?
Something like not ignore node_modules/my-library when transpiling.
I think your library shouldn't rely on third applications dependencies,
then it won't be useful and it will only work on projects that contain Babel as a depency.
Instead, You should add Babel to your library dependencies, and create a build of your library using babel to transpile your ES6 code to ES5 code which will result in standard javascript.
Therefore, you can easily add it to any project by importing the build.
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).