1

I have published a npm module written in ES6. I have used Babel to transpile it to ES5 and webpack to bundle it.

Now when I import the module in my React app and when I go to the declaration, ES5 code is opened.

module.exports = (function (e) {
  var t = {};
  function r(n) {}
...

I want to show the ES6 code when opening declaration in an IDE, not the ES5 doe.

import React from 'react';

export class RerenderTracker extends React.Component {
  componentWillUnmount() {}
...

Here is my package.json

{
  "name": "rerender-tracker",
  "version": "1.0.10",
  "description": "Component for tracking react rerenders",
  "main": "./build/index.js",
  "scripts": {
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mtroskot/rerender-tracker.git"
  },
  "keywords": [
    "react",
    "render",
    "rerender",
    "tracker"
  ],
  "author": "Marko Troskot",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/mtroskot/rerender-tracker/issues"
  },
  "homepage": "https://github.com/mtroskot/rerender-tracker#readme",
  "peerDependencies": {
    "react": ">=16"
  },
  "dependencies": {
    "react": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "babel-runtime": "^6.26.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

my .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

my webpack.config.js

var path= require("path");

module.exports = {
 entry:"./src/index.js",
 output:{
    path:path.resolve("build"),
    filename:"index.js",
    libraryTarget:"commonjs2"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  externals:{
  react:"react"
  }
};

Note

This is my first npm module so if there is something wrong in the configs or doesn't follow best practices, please let me know.

trokiize
  • 69
  • 2
  • 7
  • You probably want to generate source map(s) - see [this post](https://stackoverflow.com/questions/30870830/how-do-i-generate-sourcemaps-when-using-babel-and-webpack). – RobC May 04 '20 at 14:39
  • @RobC it seems that source map is only available when for debugging in chrome – trokiize May 04 '20 at 17:34

0 Answers0