Question

我有两个使用webpack的项目。现在我想把一个项目作为其他项目的模块。我可以创建两个包但不知道如何从另一个包中导入。

详细说明： - 让我们说我要导入的另一个文件如下所示： -

index2.js（捆绑为bundleTwo）

var obj = [{
  "id[0]": 2
}, {
  "url[0]": 11
}, {
  "id[1]": 3
}, {
  "url[1]": 14
}];

var res = [];
for (var i = 0; i < obj.length / 2; i++) {
  res[i] = obj.filter(function(o) {
             return new RegExp("\[" + i + "\]").test(Object.keys(o))
           })
           .reduce(function(obj, o) {
             var key = Object.keys(o).pop();
             obj[key.replace(/\[\d+\]/, "")] = o[key];
             return obj
           }, {})
}

console.log(res);

并在下面的文件中（在另一个bundle - bundleOne中）我要导入组件（somecomponent）： -

index1.js（在bundleOne中）

import SomeCompoent from "./components/SomeCompoent/SomeCompoent";
module.exports = {SomeCompoent}

但是这里的bundleTwo是undefiend

非常感谢任何帮助

Answer 1

我自己想出的一种方法是使用别名，这可以实现。

要使此行import {SomeCompoent} from "bundleTwo";正常工作，可以在别名中定义bundleTwo： -

 config:{
     resolve: {
        alias: {
          "bundleTwo": path.join(__dirname, "<path_to_the_bundleTwo>")
        }
   ....

Answer 2

如果您只想使用webpack，那么只需在bundletwo webpack配置中将libraryTarget设置为'umd'。

为了能够导入此模块，您需要导出捆绑包。

 output: {
        libraryTarget: 'umd',// make the bundle export
        filename: "index.js",
        path: path.resolve(__dirname, "dist"),
    }

但是，这也可以通过使用Babel将您的ES6代码转换为ES5代码来实现。

babel index2.js --out-file dist/index2.js

现在将package.json中的main设置为“dist / index2.js”

现在您可以像

一样使用它

import {SomeCompoent} from "bundleTwo";

您还可以为该

创建gulp脚本

gulp.task('js', function () {
    return gulp.src(['packages/**/*.js', "!**/*.test.js"])
        .pipe(babel({
            plugins: ['transform-runtime']
        }))
        .pipe(gulp.dest('dist'));
});

如何从使用webpack创建的不同包中导入

2 个答案: