I am trying to make Babel + Webpack transpile my files for IE11 and Safari 10. No matter what I do I cannot make it work.
I have tried uninstalling and reinstalling webpack and babel. I have tried changing just about anything within webpack.config.js and .babelrc. I have tried making a babel.config.js and webpack.config.babel.js.
I tried running
npx babel node_modules/vuetify --plugins=#babel/plugin-transform-spread,#babel/plugin-transform-parameters --presets=#babel/preset-env --no-babelrc
and outputted with spread operators still inside.
I tried compiling with webpack and spread operators are still present.
package.json
{
"name": "aspnetcore-vuejs-typescript-template",
"version": "0.1.0",
"main": "app.js",
"license": "MIT",
"author": "Danijel Hrcek",
"scripts": {
"dev": "./node_modules/.bin/webpack-cli --mode development --watch --progress --config webpack.config.js",
"build:dev": "./node_modules/.bin/webpack-cli --mode development --config webpack.config.js",
"build:prod": "./node_modules/.bin/webpack-cli --mode production --config webpack.config.js",
"publish": "npm install && ./node_modules/.bin/webpack-cli --mode production --config webpack.config.js && dotnet publish --configuration Release",
"test": "jest"
},
"dependencies": {
"acorn": "^7.0.0",
"apexcharts": "^3.8.5",
"axios": "^0.19.0",
"bulma": "0.7.5",
"bulmaswatch": "0.7.2",
"classlist-polyfill": "^1.2.0",
"core-js": "^3.2.1",
"fibers": "^3.1.1",
"portal-vue": "^2.1.6",
"regenerator-runtime": "^0.13.3",
"vue": "2.6.10",
"vue-apexcharts": "^1.4.0",
"vue-flatpickr-component": "8.1.2",
"vue-multiselect": "2.1.6",
"vue-notification": "1.3.16",
"vue-router": "3.0.6",
"vue2-animate": "^2.1.1",
"vuetify": "^2.0.5",
"vuetify-loader": "^1.3.0",
"vuex": "3.1.1"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-transform-spread": "^7.2.2",
"#babel/preset-env": "^7.5.5",
"#babel/register": "^7.5.5",
"#mdi/font": "^3.9.97",
"#types/jquery": "3.3.29",
"#types/node": "12.0.2",
"#vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"#vue/babel-preset-jsx": "^1.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"aspnet-webpack": "3.0.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "2.0.2",
"compression-webpack-plugin": "2.0.0",
"css-loader": "2.1.0",
"deepmerge": "^4.0.0",
"es6-promise-promise": "1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "3.0.1",
"html-webpack-plugin": "3.2.0",
"jest": "24.8.0",
"jest-serializer-vue": "2.0.2",
"node-sass": "4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"resolve-url-loader": "3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "0.23.1",
"ts-loader": "^6.0.1",
"typescript": "^3.4.5",
"url-loader": "1.1.2",
"vue-class-component": "7.1.0",
"vue-jest": "3.0.4",
"vue-loader": "15.7.0",
"vue-property-decorator": "8.1.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "3.3.2",
"webpack-dev-server": "3.4.1",
"webpack-hot-middleware": "2.25.0"
}
"browserslist": [
"defaults", "safari 10", "not ie <= 10"
]
}
.babelrc
{
"presets": [ "#babel/preset-env" ],
"plugins": [ "#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread", "#vue/babel-preset-jsx", "#babel/plugin-transform-parameters" ]
}
Within webpack.config.js
{
test: /\.m?js$/,
exclude: /node_modules\/(?!(vuetify|vuetify-loader|vue)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread"]
}
}
},
{
test: /\.jsx?$/,
include: [
'/node_modules/vuetify/src'
],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-object-rest-spread", "#babel/plugin-transform-spread", "#vue/babel-preset-jsx", "#babel/plugin-transform-parameters"]
}
}
},
Expected output:
function mixins() {
//emulates spread operator
}
Actual output:
function mixins(...args) {}
FWIW I think this has been fixed since the question was asked. Create a folder with files as below:
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"author": "RichN",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0"
}
}
webpack.config.js
module.exports = {
devtool: "source-map",
mode: "development",
target: ["web", "es5"],
entry: "./app.js",
output: {
filename: "bundle.js",
path: __dirname
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: [
["#babel/preset-env", {
"targets": "defaults"
}]
],
plugins: [
"#babel/plugin-proposal-object-rest-spread"
]
}
}]
}
]
}
}
app.js
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
index.html
<!DOCTYPE html>
<body>
<script src="bundle.js"></script>
</body>
Then issue commands npm i and npx webpack in that folder. The code gets transpiled to the code below in bundle.js:
function sum() {
for (var _len = arguments.length, theArgs = new Array(_len), _key = 0; _key < _len; _key++) {
theArgs[_key] = arguments[_key];
}
return theArgs.reduce(function (previous, current) {
return previous + current;
});
}
console.log(sum(1, 2, 3));
If you now load index.html as a file in Internet Explorer this code runs fine and outputs 6 in the console window
Related
I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}
I've added a css file to my ReactJS page.
The styling works perfectly fine when I run the App using "npm start", however when I make the production build with "npm run build" I'm getting the following error:
"Unexpected token, expected ;"
react-authentication-frontend#1.0.0 lint C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend
> eslint ./src ./tests
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babel-core\lib\transformation\file\index.js:558
throw err;
^
SyntaxError: C:/Users/Simon/Documents/GitHub/videoinwerken/react_frontend/src/components/Pages/Employer/Employees/AddEmployees/style.css: Unexpected token, expected ; (2:5)
1 | html,
> 2 | body {
| ^
3 | width: 100%;
4 | height: 100%;
5 | }
at Parser.pp$5.raise (C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babylon\lib\index.js:4454:13)
See my code below
SomePage.js
import React, { Component } from "react";
import "./style.css";
export default class ExcelPage extends Component {
constructor(props) {
super(props);
}
render() {
return <div>hello, this page is broken</div>;
}
}
style.css
html,
body {
width: 100%;
height: 100%;
}
I'm running the following webpack config:
Webpack
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PROD = process.env.NODE_ENV === 'production';
const DEV = !PROD;
const DevToolPlugin = PROD
? webpack.SourceMapDevToolPlugin
: webpack.EvalSourceMapDevToolPlugin;
const config = {
entry: ["./src/index"],
output: {
filename: DEV ? "bundle.js" : "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 20000
}
},
"image-webpack-loader"
]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: true,
filename: 'index.html'
}),
new DevToolPlugin({
filename: "[file].map"
})
],
devServer: {
historyApiFallback: true,
}
};
!PROD && (config.devtool = 'source-map');
PROD && config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compressor: {
warnings: false,
}
})
);
PROD && config.plugins.push(
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
);
module.exports = config;
package.json
{
"name": "react-authentication-frontend",
"version": "1.0.0",
"description": "React Authentication Frontend",
"main": "src/index.js",
"repository": "https://github.com/ZachLiuGIS/reactjs-auth-django-rest",
"homepage": "/videoinwerken/",
"scripts": {
"clean": "rimraf ./dist",
"lint": "eslint ./src ./tests",
"build": "npm run clean && npm run test && webpack --progress --profile --colors",
"start": "webpack-dev-server --port 8083",
"test": "npm run lint && mocha --require babel-register ./tests/setup.js --recursive ./tests/**/*.spec.js",
"test:watch": "npm run test -- --watch"
},
"author": "Zach Liu",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.5.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"classnames": "^2.2.6",
"css-loader": "^0.28.11",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.20.0",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.11",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.6.0",
"jquery": "^3.5.1",
"jsdom": "^11.12.0",
"mini-css-extract-plugin": "^1.0.0",
"mocha": "^4.1.0",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"proptypes": "^1.1.0",
"react-test-renderer": "^16.13.1",
"redux-logger": "^3.0.6",
"rimraf": "^2.7.1",
"sinon": "^4.5.0",
"sinon-chai": "^2.14.0",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^4.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"antd": "^3.20.1",
"axios": "^0.19.2",
"dnd-core": "^2.6.0",
"fontsource-roboto": "^2.1.4",
"immutability-helper": "^3.1.1",
"lodash": "^4.17.15",
"material-ui": "^0.20.2",
"nodemailer": "^6.4.13",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.13.1",
"react-excel-renderer": "^1.1.0",
"react-player": "^2.6.0",
"react-redux": "^5.1.2",
"react-router-dom": "^5.2.0",
"redux": "^3.7.2",
"redux-form": "^7.4.3",
"redux-form-validators": "^2.7.5",
"redux-notifications": "^4.0.1",
"redux-thunk": "^2.3.0",
"webpack-cli": "^3.3.7",
"html-webpack-plugin": "^3.2.0"
}
}
.babelrc
{
"presets": [
"react",
[
"env"
]
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
I have some code in javascript in EC6, but I need it to open on old browsers (perfectly on Samsung S4). I'm testing with Safari 5.
For compiling code I've chosen webpack + babel, but whatever configuration I choose there is one error: 'SyntaxError: Expected an identifier but found '.' instead' and it's only shown on old browsers.
For example, removing all code, except this:
import io from 'socket.io-client';
let socket = io();
Gives following error in Safari 5:
"SyntaxError: Expected an identifier but found '.' instead"
My package.json:
{
"name": "knife",
"version": "1.0.0",
"description": "socket.io app",
"dependencies": {
"axios": "^0.19.0",
"cookie-parser": "^1.4.5",
"express": "^4.17.1",
"fs": "0.0.1-security",
"jest": "^26.4.2",
"js-cookie": "^2.2.1",
"jsdoc": "^3.6.3",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"moment": "^2.27.0",
"mysql": "^2.17.1",
"phaser": "^3.20.1",
"request": "^2.81.0",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"sweetalert2": "^10.0.2"
},
"scripts": {
"start": "node index.js",
"test": "jest",
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"path": "^0.12.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js:
const path = require('path')
module.exports = {
entry: './game/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'public/js')
},
mode: 'production',
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['#babel/preset-env', {
targets: 'dead'
}]]
},
}
}
]
}
}
What is the proper way for compiling js files with webpack and babel for this purpose?
I have visited hundred webpages but couldn't find solution which fits me. I'm using webpack babel but have error "Unexpected token import" when i try to import express:
.babelrc:
{
"moduleId": "myModule",
"presets": ["es2015", "stage-0"],
"plugins": ["add-module-exports"]
}
webpack.config.js:
const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports = {
context:__dirname + '/front',
entry:__dirname + '/front/index.js',
output:{
path:__dirname + '/public/assets',
filename:'bundle.js',
publicPath:'assets'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins:[
new webpack.DefinePlugin({
TEST_ENV:process.env.NODE_ENV === "test"
}),
new ExtractTextPlugin("bundle.css",
{
publicPath: 'assets/core/css',
allChunks: true
})
],
module: {
loaders: [
{
test: /\.js/,
loader: "babel-loader",
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']}
},
{
test: /\.html/,
loader: "raw-loader"},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version!sass-loader")
}
]
},
devServer: {
port: 7000,
},
devtool: 'source-map',
}
package.json:
{
"name": "SA-19KV",
"version": "1.0.0",
"description": "Project Boilerplate",
"scripts": {
"ngdev": "webpack-dev-server --content-base public/ --progress --colors ",
"nghot": "webpack-dev-server --content-base public/ --progress --colors --inline --hot",
"test": "set NODE_ENV=test && karma start",
"prod": "webpack -p",
"backdev": "nodemon server.js --watch back/"
},
"dependencies": {
"angular": "1.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"style-loader": "^0.13.1"
},
"devDependencies": {
"angular-mocks": "^1.6.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "1.6.1",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-html-detailed-reporter": "^1.1.15",
"karma-mocha": "^1.3.0",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"node-sass": "^4.4.0",
"nodemon": "^1.11.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "1.14.1"
},
"author": "Me :-)",
"license": "ISC"
}
Your package.json scripts aren't loading your webpack's config. You can load it by adding the --config parameter:
webpack-dev-server --config ./webpack.config.js
I'm desperately trying to get my Webpack config file to transpile ES6 into ES5, but for some reason it doesn't seem to work. I'm still getting the 'const' variable, arrow functions and spread operators in my exported js code. I've attached my webpack config file and my package.json file - any help would be really appreciated.
Package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "cross-env NODE_ENV=development webpack --mode development",
"build:prod": "cross-env NODE_ENV=production webpack --mode production",
"start": "webpack-dev-server --port 9000 --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.7.7",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.7.7",
"#babel/runtime": "^7.8.4",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^6.0.3",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"typescript": "^3.7.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#babel/polyfill": "^7.8.3",
"#glidejs/glide": "^3.4.1",
"aos": "^3.0.0-beta.6",
"axios": "^0.19.2",
"core-js": "2",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"query-string": "5.1.1",
"scrollbooster": "^2.1.0",
"simple-parallax-js": "^5.2.0",
"smooth-scrollbar": "^8.5.1",
"tippy.js": "^5.1.4"
}
}
Webpack config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const data = require('../pageinfo.json');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: ['#babel/polyfill','./src/scripts/index.js'],
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [{
test: [/.css$|.scss$/],
use: [MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|svg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images'
}
}]
},
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [["#babel/preset-env", { "useBuiltIns": "usage" }]],
plugins: [
["#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/fonts'
}
}]
}
]
},
resolve: {
extensions: ['.js']
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new CopyWebpackPlugin([{
from: './src/assets/images',
to: 'assets/images'
}]),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.[chunkhash].css'
})
]
};
Go to your package.json file. The babel command takes two arguments: the path to your ES6 code and a path to where you want your ES5 code to go.
If you have all your JavaScript code housed in a directory, then you can add the -d flag to the command to tell Babel for look for directories instead of files. For my example, I have my JavaScript code in my src directory but want my ES5 code to be put in a build directory.
// package.json
...
"scripts": {
"build": "babel src -d build",
},
...
Then just run the Babel command
With your .babelrc file created and your build command ready, just run it in your command line.
npm run build