I'm working on a TS library that's meant to be used on browsers. It has a dependency on the latest marked, which does not work on my Safari 10.14.5. I noticed that if I ran my bundle.js manually in Babel's playground using the targets defaults, not ie 11, not ie_mob 11, then the reworked bundle actually works on my Safari.
Therefore, I decided to integrate Babel loader into my Webpack config to generate the bundle. Here are my files:
webpack.config.js
var path = require("path");
module.exports = {
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: "window",
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
};
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"],
"plugins": ["@babel/plugin-proposal-class-properties"],
"targets": "defaults, not ie 11, not ie_mob 11"
}
In my package.json scripts, I have the following:
{
...
"scripts": {
"build": "webpack --config webpack.config.js"
}
...
}
Now if I run npm run build, unfortunately, the bundle that gets created using Webpack does not work on my Safari, even though as I mentioned before, manually running it through the REPL makes it work. So what gives? Do I have a wrong or missing setting somewhere?