我试图找到该解决方案的答案，但是找到的答案通常与在脚本标记中添加“模块”有关(由于我未编写浏览器代码，因此不适用于我的情况)或使用导入/导出在javascript文件中(Node当前不支持)，这意味着需要使用babel或 typescript 。由于我在 typescript 项目中看到此错误，因此我不希望看到此错误。
实际上，我有2个 typescript /Webpack项目(设置几乎相同，项目A取决于项目B)从其他项目导入1个定义。
在项目B中，我有几个类，其中两个已导出，另外还有一些其他定义。在项目B的index.ts中:
export * from './types';
export * from './specService/spec-option-service.class';
export * from './converter/xpath-converter.class';
并以如下方式导出:
// types.ts
//
export interface IElementInfo {
readonly id?: string;
readonly recurse?: string;
readonly discards?: ReadonlyArray<string>;
readonly descendants?: {
readonly by?: string;
readonly throwIfCollision?: boolean;
readonly throwIfMissing?: boolean;
};
}
// ... plus other similarly defined exports
// specService/spec-option-service.class.ts
//
export class SpecOptionService { ...
// converter/xpath-converter.class.ts
//
export class XpathConverter { ...
然后在项目B的index.ts中，导出所有定义(从blah导出*)供客户使用，如本文顶部所示。
当我构建项目B时，导出没有此类问题。
将项目B安装到项目A之后
从我导入的 typescript 文件中使用:
Webpack甚至成功地构建了项目A的 bundle 包，没有错误。该错误发生在运行时，在这种情况下，当我去运行测试时，会看到以下内容:
/Users/User/dev/github/js/projecta/node_modules/projectb/lib/index.ts:2
export * from './types';
^^^^^^
SyntaxError: Unexpected token 'export'
at Module._compile (internal/modules/cjs/loader.js:892:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.projectb (/Users/User/dev/github/js/projecta/dist/projecta-test-bundle.js:292:18)
在projectb的webpack bundle 包的结尾，我发现了以下内容:
我认为这是有错的。为什么webpack为“es5”目标构建的 bundle 包包含对 typescript 的引用？这注定会失败吗？我本来希望对生成的索引有需求。 js 文件(不是索引。 ts )。
这是我第一次在 typescript 中跨项目边界完成导入/导出操作，所以我知道我做错了什么，但是呢？
这两个项目中的tsconfig.json文件是相同的:
{
"compilerOptions": {
"allowJs": true,
"alwaysStrict": true,
"esModuleInterop": true,
"module": "commonjs",
"moduleResolution": "Node",
"noImplicitAny": true,
"sourceMap": true,
"strictNullChecks": true,
"target": "es5",
"types": [
"mocha", "node"
],
"lib": [
"es5",
"es2015",
"es6",
"dom"
]
},
"include": [
"lib/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
和webpack配置:
{
devtool: 'source-map',
entry: {
index: './lib/index.ts'
},
target: 'node',
mode: mode,
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.ts(x?)$/,
use: 'ts-loader'
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
new webpack.BannerPlugin({
banner: '#!/usr/bin/env node',
raw: true
})
],
resolve: {
extensions: ['.ts', '.js', '.json']
},
watchOptions: {
ignored: /node_modules/
},
output: {
filename: 'projecta-bundle.js',
sourceMapFilename: 'projecta-bundle.js.map',
path: path.join(__dirname, 'dist'),
libraryTarget: 'commonjs'
}
}
项目A和B分别是plastikfan/jaxom和plastikfan/zenobia。在将最新版本的jaxom发布到npm之前，我正在执行npm-publish之前的检查(了解这是早期npm软件包的明智之举)，以检查客户端是否可以按预期使用该软件包。 (过去，我在导出某些内容时犯了一个错误，但是在客户尝试使用它之前，这个问题并不明显。在您发布之前，您可以据我所知检查所有内容。建议的方法是使用nom pack打包您的软件包，然后将其安装到客户端中。
仅供引用，zenobia package.json是(简化版):
{
"name": "zenobia",
"version": "0.0.1",
"main": "lib/index.ts",
"scripts": {
"t": "mocha ./dist/zenobia-test-bundle.js",
"test": "npm audit --skip-unused && npm run t",
"build": "npm run build:d",
"build:d": "webpack -d --env.mode development",
"build:p": "webpack -p --env.mode production",
"build:t": "webpack --config webpack.config.test.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/plastikfan/zenobia.git"
},
"dependencies": {
"@types/node": "^12.12.14",
"@types/ramda": "^0.26.36",
"jaxine": "^2.0.1",
"jaxom": "file:../NPM-LOCAL/jaxom-0.0.1.tgz",
"ramda": "^0.26.1",
"xmldom": "^0.1.27",
"xpath": "0.0.27"
},
"devDependencies": {
"@commitlint/cli": "^8.3.3",
"@commitlint/config-conventional": "^8.2.0",
"@types/chai": "^4.2.5",
"@types/dirty-chai": "^2.0.2",
"@types/mocha": "^5.2.7",
"@types/sinon": "^7.5.1",
"@types/sinon-chai": "^3.2.3",
"chai": "^4.2.0",
"commitizen": "^4.0.3",
"cz-conventional-changelog": "^3.0.2",
"depcheck": "^0.9.1",
"dirty-chai": "^2.0.1",
"mocha": "^6.2.2",
"nyc": "^14.1.1",
"precommit-hook": "^3.0.0",
"raw-loader": "^4.0.0",
"rimraf": "^3.0.0",
"semistandard": "^14.2.0",
"shebang-loader": "0.0.1",
"sinon": "^7.5.0",
"snazzy": "^8.0.0",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"tslint-config-semistandard": "^8.0.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-config-utils": "^2.3.1",
"webpack-node-externals": "^1.7.2"
}
}
和jaxom的cutdown package.json:
{
"name": "jaxom",
"main": "./lib/index.ts",
"scripts": {
"clean": "rimraf dist && rimraf decl",
"t": "mocha ./dist/jaxom-test-bundle.js",
"test": "npm audit --skip-unused && npm run t",
"build": "npm run build:d",
"build:d": "webpack -d --env.mode development",
"build:p": "webpack -p --env.mode production",
"build:t": "webpack --config webpack.config.test.js"
},
"dependencies": {
"@types/ramda": "^0.26.36",
"@types/xregexp": "^3.0.30",
"jinxed": "0.0.2",
"moment": "^2.24.0",
"ramda": "^0.26.1",
"xmldom-ts": "^0.3.1",
"xpath-ts": "^1.3.13",
"xregexp": "^4.2.4"
},
"devDependencies": {
"@commitlint/cli": "^8.2.0",
"@commitlint/config-conventional": "^8.2.0",
"@types/chai": "^4.2.5",
"@types/dirty-chai": "^2.0.2",
"@types/mocha": "^5.2.7",
"@types/sinon": "^7.5.1",
"@types/sinon-chai": "^3.2.3",
"chai": "^4.2.0",
"commitizen": "^4.0.3",
"cz-conventional-changelog": "^3.0.2",
"depcheck": "^0.9.1",
"dirty-chai": "^2.0.1",
"json-loader": "^0.5.7",
"mocha": "^6.2.2",
"precommit-hook": "^3.0.0",
"raw-loader": "^4.0.0",
"rimraf": "^3.0.0",
"sinon": "^7.5.0",
"sinon-chai": "^3.3.0",
"snazzy": "^8.0.0",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"tslint-config-semistandard": "^8.0.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-config-utils": "^2.3.1",
"webpack-node-externals": "^1.7.2"
}
}
最佳答案
我认为tsconfig在这里可能是个问题。
因为在导入import * as ProjectB from 'projectb';时，由于projectA tsconfig的include和exclude属性，您的projectB文件不会被 typescript 转译。尝试将projectB添加到projectA的编译过程中。
类似于projectA tsconfig中的include: [ "lib/**/*", "my/path/to/projectB/**"]。
关于javascript - 语法错误: Unexpected token 'export' in Nodejs project with Typescript and Webpack，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59162625/