I have a large angular 1.6 application. Most of it is written in ES5 syntax and some small parts are sort of ES6. I'm saying sort of ES6 because we don't actually use modules/import/export. The reason for that is although we do use gulp to bundle all source code when deploying, we don't want to do that on dev, because it involves running gulp every small code change, and running it takes time, plus the fact that its much nicer to debug the original file per class structure rather then the bundled code (even when not uglified).
Is there a way, to debug angular 1.6 in ES6 syntax without bundling? Can Babel somehow help me keep the original files structure, for development purposes only?
Babel is basically a transpiler, so its job is only to make sure to output es5 code. It will NOT help u organize folder structure.
Bundling it with webpack helps u maintain a sane folder structure. u can have a configuration object which specifies your entry-point,(called "entry"), output-file, loaders, inline : true, so it automagically refreshes the browser for you for any small change. webpack also comes with a dev-server.
Below is what i use in my webpack.config.js.
It helps me maintain a local sandbox for my es6 escapades.
module.exports = {
entry : ['./app/index.js'], //entrypoint
output: {
path: 'D:\\js\\es6\\build',
filename: 'bundle.js'
},
module: {
loaders: [ //specify objects for each loader
{
loader: 'babel-loader' ,
test: /\.js$/,
exclude: /node_modules/, //we dont want to transpile the .js on node_modules
}
]
},
devServer: {
port: 3000,
contentBase: './build',
inline: true, //allows us to run automatic live code update
}
}
Related
I'm using "vite": "^2.8.6" for React project. What I know is that Vite is using Rollup as module bundler, but I stumbled on a problem where Rollup still bundling my react-dom.development.js and react.development.js. I've used "rollup-plugin-replace" to replace my 'process.env.NODE_ENV' to production, but the problem still occur. Here is the my rollup config:
rollupOptions: {
// https://reactjs.org/docs/optimizing-performance.html#rollup
plugins: [
rollupPluginReplace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
rollupPluginCommonjs(),
terser(),
visualizer()
],
},
When I analyze with rollup-visualizer, you can see that rollup bundled both production and development dependency, which supposedly only bundled one of them right?
The problem with this is that there is extra 1MB of dead code in the bundle, it will be great if I can eliminate it.
This generally means that rollup does not understand that your app is directed towards production code. In my case it was because I had set up library mode.
lib: {
entry: './src/app.ts',
fileName: 'app.ts',
name: 'AppClass',
formats: ['iife'],
}
Removing this block finally generated a build which was sane in size. For more information, see the vite documentation.
If you were also trying to get vite/rollup to build your app as an IIFE, setting rollupOptions worked for me:
rollupOptions: {
output: {
entryFileNames: `[name].js`,
assetFileNames: `app.[ext]`,
format: 'iife',
},
input: ['./src/app.ts'],
},
So I've written a really simple React app, but didn't use the create-react-app setup. I wanted to learn on my own how something like CRA actually gets built. I basically just used webpack to build and bundle my React app. Currently, I have a Babel loader to translate my React/JSX, and an "html-loader", for my HTML I guess (I read a tutorial for Webpack that said I needed it, but I still don't understand why I have to translate my HTML? It's HTML, what does it even translate to)?
My project currently has no CSS styling yet, and I want to learn how to add it. But I'm confused as to what loaders I should use. I'm pretty sure I'll need a Less loader for my .less files, but the Less loader compiles Less to CSS. So would I then need a CSS loader for the compiled less files? And then would I need a style loader for the CSS?
You will need the following loaders :
style-loader
css-loader
less-loader
So basically a webpack config as follow :
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}
]
}
]
}
Check this answer to know what each loader does.
You might want to consider https://www.styled-components.com/. This library allows you to locate your stylesheet alongside with your react components.
If I am correct, using this library won't change your current webpack config.
If you want a more "traditional" approach for styling your react application, you will need at least two loaders for your webpack config:
style-loader and css-loader.
less and sass loaders will be required if you intend to use css-preprocessors though.
For the first time I've ran npm run build and uploaded to my server.
I realised that there wasn't any styling being pulled through very quickly and that it isn't even being referenced in my index.html file.
This is all working great on my dev setup when I run npm start
This is my production config and I'm wondering if there is anything obvious to why this isn't running.
https://jsfiddle.net/vmt20f8w/
I should point out that I am using SCSS files instead of css and importing them into my component js files. I thought the webpack.config.prod.js would have then taken all of these scss files and compile them down to one css file?
Update
I've now updated my config with the below code and it still isn't compiling the scss.
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}]
},
To make this even more clear I've actually got a public repo in which people can view all my code to understand the problem:
https://github.com/maximus-lynn/react-portfolio
You are using a loader for css files, but not for your scss files. Install sass-loader and change your config to look something like this:
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
I'm reading tutorial about Webpack on this: Github Webpack tutorial In this, there is a section about config webpack for production and development.
Here is development configuration:
// webpack.config.dev.js
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
Here is production configuration:
// webpack.config.prod.js
module.exports = {
devtool: 'source-map',
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
I understand the difference in option of devtool. The thing I don't understand about entry. Why in production, entry is only about src/index but in development configuration, entry also includes webpack-dev-server
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
The lines 'webpack-dev-server/client?http://localhost:8080' and 'webpack/hot/dev-server' are configuring/defining which port to attach an active websocket to, in this case localhost:8080, and the content base which in this case is folder/path /client. In a production environment you would never run webpack-dev-server as your bundled client assets (bundle.js or similar) would be served by a server (IIS, Node, etc), that is why there are no webpack related items in entry of the production configuration.
The Webpack plugin in question webpack-dev-server is not required to run Webpack and compile your JS sources, it simply is a tool that can be used during the development process to watch for changes and reload changes.
Technically the entry array property in development could simply be the './src/index', but then it wouldn't enable the webpack-dev-server and/or it's hot module reloading. If you wanted to run webpack-dev-server without these configuration items then you'd then need to add command line arguments when starting webpack to specify the port and/or content base.
Hopefully that helps!
Here is the 2 things you should know before understanding:
As your linked in Webpack the confusing part, there are 3 types of entry: String Array and Object. As above code, that is array type. Meaning of entry array is: Webpack will merged all those javascript files in array together. This is often unnecessary because Webpack is intelligent enough to know which javascript files need to merge while processing. You often need to do this to enhance some features from different javascript files that you don't include somewhere else in your code.
This is "little tricky" part. You see webpack/hot/dev-serverand webpack-dev-server/client?http://localhost:8080 look like a web url rather than some javascript files, right? If you check your project directory, you see there are those files: your_app_directory/node_modules/webpack/hot/dev-server.js and your_app_directory/node_modules/webpack-dev-server/client.js. And that is the real meaning: you are importing two javascript files from two modules webpack-dev-server and webpack.
Back again to your webpack configuration:
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
That means we will merge three different javascript files together as point 2 I have figured out. As I explain in point 1, you will do this for enhancing some features. You include file webpack-dev-server/client.js for making a server for serving your code. You include file webpack/hot/dev-server.js for allowing your code autoloading. This is super useful when you in development mode without start/stop server each time you modify your code.
How can I use webpack to bundle Reactjs components that use ES6? The resulting bundle should be in ES6, it should not be transpiled to ES5.
There are a lot of good Reactjs/webpack examples available but all that I've found transpile to ES5.
Just run babel-loader without the ES2015 preset and add the transform-react-jsx plugin:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
plugins: ['transform-react-jsx']
}
}
]
}
I found this very nice example on how to configure Webpack with React and more: https://github.com/krasimir/react-webpack-starter. It uses ES6, including ES6 imports, but transpiles down to ES5.
By hacking the babel preset, I managed to get it to spit out ES6 bundled code. I changed the file node_modules/babel-preset-es2015 to:
module.exports = {
plugins: [
require("babel-plugin-transform-es2015-modules-commonjs")
]
};
This is of course not an acceptable solution, what one needs to do is to find or create Bable preset that contains this.
The first thing I notice after this, was that UglifyJS doesn't support ES6. I suspect that there will be other issues down the road, so newbies like my self should perhaps stick to transpiling to ES5 a little bit longer.