reactjs - 如何让es6编写的npm模块在打开声明时指向源码

Question

我已经发布了一个用 ES6 编写的 npm 模块。我使用 Babel 将其转译为 ES5 并使用 webpack 进行捆绑。

现在，当我在我的 React 应用程序中导入模块并进入声明时，ES5 代码被打开。

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

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

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 模块，所以如果配置中有问题或不遵循最佳实践，请告诉我。

标签： reactjsnpmwebpacknode-modulesbabeljs