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.path must be absolute：

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

如何创建可在React Application中使用的Webpack库？

2 个答案: