Skip to content

Instantly share code, notes, and snippets.

@coreysnyder
Created June 20, 2018 16:11
Show Gist options
  • Save coreysnyder/f0170f9b7c19620716f9d3049c27207e to your computer and use it in GitHub Desktop.
Save coreysnyder/f0170f9b7c19620716f9d3049c27207e to your computer and use it in GitHub Desktop.
What's the difference?
I've seen 3 different ways loaders are used, and I'm not sure what the the heck the difference is,
or which ones are even necessary.
//####### In .babelrc file
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
//####### In package.json file
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
]
}
//####### In Webpack config loaders
....
module: {
rules: [
{
{
test: /\.js$/,
exclude: /(node_modules\/(?!(@myfiles)\/).*|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
retainLines: true
}
}
]
},
}
]
}
....
/##########################
One thing I found is that if I omit the the preset definitions in my webpack config then I
get errors with uglifyjs and other random things. When do you need each? Which are redundant?
@blorenz
Copy link

blorenz commented Jun 20, 2018

Only use .babelrc. babel will find it and supersedes the use of webpack.config.js . I don't know of any use in package.json.

{
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
"transform-object-assign",
"transform-object-rest-spread",
"transform-class-properties",
"transform-flow-strip-types"
],
"presets": ["es2015", "react"]
}

@coreysnyder
Copy link
Author

When I omit line 29, and don't have a preset definition in my webpack config, I get errors trying to build wepback. One of them was regarding uglifyjs like: SyntaxError: Unexpected token: name (xxxxxx) from Uglify plugin

@khanzzirfan
Copy link

khanzzirfan commented Jun 21, 2018

I dont know the @babel tag does at the front, but this is how we with out @babel tag.
Also never use any configuration in package.json file.

{
  presets: ['react', 'stage-0'],
    env: {
        test: {
            plugins: [
                "transform-es2015-modules-commonjs", //for class inheritance transpiled correctly
                "transform-es2015-parameters",  //for class inheritance transpiled correctly
                "transform-es2015-destructuring"  //for class inheritance transpiled correctly
                ]
        }
    }
}
 module: {
        rules: [
            {
                test: /\.js$/,
                exclude: function (modulePath) {
                    return /node_modules/.test(modulePath) &&
                        !/node_modules\\validate/.test(modulePath); //validate module needs to be transpiled
                },
                use: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['env', 'react', 'stage-0'],
                            plugins: [
                                "transform-es2015-modules-commonjs", //for class inheritance transpiled correctly
                                "transform-es2015-parameters",  //for class inheritance transpiled correctly
                                "transform-es2015-destructuring"  //for class inheritance transpiled correctly
                            ]
                        }
                    }
                ]

            },

here is the version of babel in use at the moment for me

"devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.2",
    "babel-jest": "^21.0.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-es2015-parameters": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.6.1",
    "css-loader": "^0.28.7",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment