在声明中，如何使用es6编写的npm模块指向源

Question

我已经发布了用ES6编写的npm模块。我已经使用Babel将其转换为ES5，并通过webpack对其进行捆绑。

现在，当我在React应用程序中导入模块并且转到声明时，将打开ES5代码。

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

我想在IDE中打开声明时显示ES6代码，而不是ES5文件。

import React from 'react';

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

这是我的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"
  }
}

我的.babelrc

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

我的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"
  }
};

注

这是我的第一个npm模块，因此，如果配置有问题或不遵循最佳实践，请告诉我。

Answer 1

请检查本文以了解Web Pack模块

https://medium.com/@premal.suresh.katigar/how-to-create-a-react-app-from-scratch-using-webpack-4-f9c1ca974dc6