Question

我正在尝试从现有的js文件组成一个webpack捆绑包，并在其他JS文件中以及偶尔在html脚本标记中使用该文件的导出。后来添加babel将整个东西转换为es5，因此用babel和ts注释掉了部分，btw正常工作。目前，我在使用直接Webpack进行导出时遇到问题。

Webpack的配置如下：

var path = require('path');
const { updateCommaList } = require('typescript');

module.exports = {
    entry: {
        'core' : [
        './src/utils.js',
        './src/zdlg.js'
        ]
    },
    devtool: 'source-map',
    stats: 'verbose',
    resolve: {
      modules: ['node_modules']
    },
    resolveLoader: {
      extensions: ['.ts', '.tsx'],
      mainFields: ['loader', 'main']
    },
    output: {
      filename: '[name].js',
      library: "LIB",
      libraryTarget: 'var',
      path: path.resolve(__dirname, "dist")
    },
    module: {
     }
  };

我可以捆绑文件，那里没有错误。我正在使用export语句导出函数，如下所示：

export function v ...

在我拥有的html文件中

<script src="./core.js"></script>
<script type="module" src="./io.js"></script>

修补了几天后，我发现了一些问题。

如果核心对象的进入部分中只有一个文件，则导出工作有效，因为LIB变量具有每个导出函数的属性，因此我可以很好地调用LIB.v（）。
导入始终无法正常工作，即 io.js导入：

import {v} from './core.js';

在加载页面时生成错误：未捕获的SyntaxError：找不到上一行的输入：v 。

将第二个文件添加到条目会导致webpack覆盖第一个文件的导出。我最初没有看到任何出口的原因是zdlg.js没有出口任何东西，而LIB没有出口。如果zdlg.js导出任何功能，则它们是唯一显示在LIB上的功能。

因此，最后，我可以从单个文件导出函数，但是我认为webpack的全部目的是允许由多个文件组成模块。

我不确定我想念什么或我要去哪里错，应该是非常基本的东西...

如果重要的话，这也是dev dep列表：

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "install": "^0.13.0",
    "npm": "^6.14.7",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.0.9"
  }

Answer 1

使它工作，尽管不确定这是否是最好的方法。

基本上，我没有在导出的条目部分中添加多个条目，而是创建了index.js文件，该文件从我需要的文件中重新导出了所有导出：

require('./src/ut');
require('./src/zd');

export * from './src/ut';
export * from './src/zd'

条目现在只是index.js

entry: {
        'core' : 'index.js'
    },

可以按预期工作，但是我不确定为什么webpack不能自动执行此操作，为什么我必须自己导出所有内容...

无法从webpack捆绑包访问已定义的导出？

1 个答案: