如何制作一个可以在 React Application 中使用的 webpack 库？

Posted 2023-02-22

【中文标题】如何制作一个可以在 React Application 中使用的 webpack 库？

【英文标题】：How to make a webpack library that can be consumed in React Application?

【发布时间】：2017-08-11 10:09:16

【问题描述】：

如何创建可以在 ReactJS 中使用的 webpack 库 ES6。喜欢

-----lib.js-----
export function sum(a , b) 
    return a + b;
;

export function multiply(a, b) 
    return a * b;
;

我想使用以下导入语句来消费：-

import lib from './lib';
console.log(lib.sum(3,5));

我正在使用以下作为 webpack.config.babel.js

export default () => (
    
        entry: './src/lib.js',
        output: 
            path: './dist',
            filename: 'lib.js',
            libraryTarget: 'umd',
            library: 'lib'
        ,
        module: 
            rules: [
                test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
            ]
        ,
    
);

.babelrc 文件包含以下配置

    "presets": ["es2015"]

package.json 内容

  "name": "lib",
  "version": "1.0.0",
  "description": "",
  "main": "dist/lib.js",
  "scripts": 
    "build:lib": "webpack"
  ,
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-es2015-webpack": "^6.4.3",
    "webpack": "^2.2.1"
  

【问题讨论】：

粘贴 package.json 的库，如果您的库代码与使用它的 react 组件位于单独的包中。

【参考方案1】：

除了你要导入的方式外，一切都正确，用这个来导入这个文件中定义的所有函数：

import * as lib from './lib';

现在你可以使用lib.sum(1,2);的任何功能

原因：您要导出许多函数，因此您需要单独导入每个函数或使用 * 来全部导入。

替代方式：

使用module.exports导出很多方法，lib.js文件：

module.exports = 
    sum: function(a,b)
       return a + b; 
    ,

    multiply: function(a,b)
       return a * b; 
    

通过以下方式导入此文件：

import Lib from "lib";

现在lib.sum(1,2);使用它

参考：https://danmartensen.svbtle.com/build-better-apps-with-es6-modules

【讨论】：

它不适合我。我添加了有问题的 webpack 配置文件。

【参考方案2】：

一些事情突然出现：

如果你导出所有东西，你也应该导入所有东西：

import * as lib from './lib';

（如@MayankShukla 删除的答案所述）

output.pathmust be absolute:

output: 
    path: path.resolve(__dirname, 'dist'),
    // ...

【讨论】：

拥有 10k 声誉的好处，您可以看到已删除的答案 :)

对 @MayankShukla，将 " 已删除答案" 更改为 "a 已删除答案" i> :)