All:
When I followed the tutorial of Facebook React, it only talked about how to transpile with Babel, but no content with browserify, I wonder if I use gulp, how to build the work flow with babel and browserify.
For example:
Transpile all *.js files in /js folder, and copy them to /build/js
When 1 is ready, broserify all /build/js/*.js into bundle.js and copy to /dist/js
Copy *.html to /dist/
That is it! Thanks
You could do that, or compile and browserify in the same step with the babelify transform for browserify.
Here is a basic example of how to compile and bundle modules in one step using babelify, and assuming an entry file that has a dependency graph that includes all of the modules you want to bundle.
browserify('./js/entry')
.transform(babelify)
.bundle()
.pipe(fs.createWriteStream('./dist/bundle.js'));
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
I am learning React and I have already created a few apps with CRA.
I haven't found a good and easy way to include sass on my react projects so I came up with this:
install node-sass on the src folder
add this to the package.json:
"node:sass": "node-sass src/index.scss src/index.css -w"
then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.
is there any problems with doing that?
I've read some tutorials to config webpack to use sass but it sounded to complicated.
Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46
For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.
Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem
If you want to use sass in your react app, install chokidar
It will help you:
https://www.npmjs.com/package/react-scripts-sass-chokidar
Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
All you need is to install node-sass if not already
npm i node-sass --save-dev
And then make sure you import files with scss extension.
If you need to change old css files, change the extension, and so follow with the imports.
This is for bundling JS files through Browserify with out Grunt/Gulp . but through npm script(defined in package.json)
I am working on Anularjs mature application. which have everything in it.
right now its using grunt for bundling all js files and then refers that bundle file to index.html page.
i couldnt find any article which can let me know how can i user browserify for bundling all the js files (with minimum changes)of my project.
Folder structure of Project.
or can someone please share any good article on it.
Thanks in advance.