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

Question

如何创建可以在 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"
  }
}

Answer 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

Answer 2

一些事情突然出现：

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

  import * as lib from './lib';
  

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

• output.pathmust be absolute:

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