我试图从现有的 js 文件组成一个 webpack 包,并在其他 JS 文件和偶尔在 html 脚本标记中使用导出。后来添加 babel 将整个东西转换为 es5,因此用 babel 和 ts 注释掉了部分,顺便说一句工作正常。现在我在使用直接 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';
加载页面时产生错误:Uncaught SyntaxError: import not found: v对于上面的行。
将第二个文件添加到条目会导致 webpack 覆盖第一个文件的导出。我最初没有看到任何导出的原因是 zdlg.js 没有导出任何东西,而 LIB 没有导出。如果 zdlg.js 导出任何函数,它们是唯一显示在 LIB 上的函数。
所以,最后,我可以从单个文件中导出函数,但我认为 webpack 的全部目的是允许从多个文件中组合模块。
我不确定我错过了什么或哪里出错了,应该是非常基本的东西......
如果它很重要,这里也是开发部门列表:
"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"
}
互换的青春
相关分类