当我运行'npm run start'或从命令行运行'node_modules / .bin / webpack-dev-server'时出现以下错误：
SyntaxError: Unexpected token export
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:670:28)
at Module.m._compile (/sites/thr-int/node_modules/ts-node/src/index.ts:403:23)
at Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Object.require.extensions.(anonymous function) [as .ts] (/sites/thr-int/node_modules/ts-node/src/index.ts:406:12)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
我正在使用Webpack 4.8.3以及以下配置文件： webpack.config.ts：
import * as webpack from 'webpack';
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
console.log("dev mode:>>> ", devMode);
const config: webpack.Configuration =
{
mode: 'production',
entry:[ './src/index.ts', './src/styles/style.scss' ],
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
output:
{
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module:
{
rules:
[
{
test: /\.css$/,
use:
[
'style-loader',
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoader : 1 } }
,'postcss-loader'
]
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.(sass|scss)$/,
use:
[
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options:
{
includePaths: ["./src/styles/style.scss"],
sourceMap: true,
importLoader: 2
}
},
"postcss-loader",
"sass-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
],
},
resolve:
{
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins:
[
new MiniCssExtractPlugin (
{
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
new CleanWebpackPlugin(['dist'])
,new HtmlWebpackPlugin (
{
title: 'Thought Render'
})
],
};
export default config;
tsconfig换的WebPack-config.json：
"compilerOptions": {
"module": "commonjs" ,
"target": "es5"
}
}
tsconfig.json：
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es2015",
"target": "es6",
"jsx": "preserve",
"allowJs": true
}
}
在我的package.json文件中：
{
"name": "thr-int",
"version": "1.0.0",
"description": "interactive part of thought render site",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"build": "TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
},
"author": "deriv diggs",
"license": "ISC",
"devDependencies": {
"@types/lodash": "^4.14.109",
"@types/node": "^10.1.2",
"@types/webpack": "^4.4.0",
"autoprefixer": "^8.5.2",
"bootstrap": "^4.1.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"popper.js": "^1.14.3",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^2.1.5",
"postcss-preset-env": "^5.1.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"sugarss": "^1.0.1",
"ts-loader": "^4.3.0",
"ts-node": "^6.0.3",
"tsconfig-paths": "^3.3.2",
"typescript": "^2.8.3",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"@types/bootstrap": "^4.1.0",
"@types/node-sass": "^3.10.32",
"@types/webpack-dev-server": "^2.9.4",
"lodash": "^4.17.10",
"postcss-import": "^11.1.0",
"save-dev": "^2.0.0"
}
}
index.ts
import * as $ from "jquery";
(<any>window).jQuery = $
import * as _ from "lodash";
import "bootstrap";
import { Print } from "./Print"
const Logo = require('./images/logo_thr_circle.png');
let printMe:Print = new Print();
/**
* Fires when everything is loaded and ready to GO!
*/
document.addEventListener("DOMContentLoaded", function(event):void
{
document.body.appendChild(component());
document.body.appendChild(componentO());
});
function component()
{
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack w/typscript bout time but no sass :('], ' ');
element.classList.add('hello');
let myLogo = new Image();
myLogo.src = Logo;
element.appendChild(myLogo);
let btn = document.createElement('button');
btn.innerHTML = 'Click for console';
btn.onclick = printMe.printer;
element.appendChild(btn);
return element;
}
function componentO()
{
let elementO = document.createElement('div');
elementO.innerHTML = _.join(['Hello', 'SASS'], ' ');
elementO.classList.add('helloWorld');
return elementO;
}
当我运行'npm run build'时，一切都按预期工作。我一直在谷歌上搜索几天了。请帮忙！
答案 0 :(得分：0)
还要在TS_NODE_PROJECT脚本中设置start值。
"start": "TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack-dev-server --open"