[英]Webpack + Karma + Typescript + Ng1: Uncaught SyntaxError: Unexpected token import
I have the following karma.conf... 我有以下karma.conf ...
var webpackConfig = require('./webpack.common.js');
webpackConfig.entry = {};
webpackConfig.plugins = [];
var globFlat = require('glob-flat');
var appFiles = globFlat.sync([
'./src/main/coffee/**/*Module.coffee',
'./src/main/coffee/**/*.coffee'
]);
var styleFiles = globFlat.sync([
]);
var dependencyFiles = [
'./src/main/typescripts/*.ts',
];
var testFiles = globFlat.sync([
'./test/main/**/*.coffee',
'./test/main/**/*.js'
]);
var files = dependencyFiles.concat(appFiles, styleFiles, testFiles);
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'requirejs', 'chai-spies', 'chai'],
files: files,
preprocessors: {
'../src/main/coffee/**/*.coffee': ['webpack'],
'../src/main/typescripts/**/*.ts': ['webpack'],
'../src/test/**/*.coffee': ['coffee']
},
webpack: webpackConfig,
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
};
and the following webpack... 和以下的网络包......
var webpack = require("webpack");
var glob = require('glob-all');
const helpers = require('./helpers');
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var environment = process.env.NODE_ENV || 'development';
module.exports = function(options){
console.log("Running in " + environment+ " mode");
isProd = options.env === 'production';
return {
context: helpers.root(''),
entry: {
... // Shouldn't matter since it is overridden
},
resolve: {
extensions: ['', '.js', '.ts', '.coffee', '.pug', '.styl', '.less', '.css'],
modules: [helpers.root('src'), 'node_modules']
},
output: {
filename: "[name].js",
path: path.join(helpers.root(''), "src/main/webapp")
},
module: {
loaders: [
{test: /\.pug$/, loader: "pug-html-loader"},
{test: /\.ts$/, loader: 'ts'},
{
test: /\.coffee$/,
loaders: ["coffee-loader", "coffee-import"]
},
{test: /\.html$/, loader: "html?interpolate=require&-minimize"},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{test: /\.css$/, loader: "style-loader!css-loader"},
// I have to add the regex .*? because some of the files are named like... fontello.woff2?952370
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/,
loader: 'url?limit=900000'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: helpers.root('src/main/html/index.html')
})
]
}
};
But for some reason when I run karma run
I get... 但由于某种原因,当我运行
karma run
我得到......
Chrome 53.*** (Mac OS X ***) ERROR
Uncaught SyntaxError: Unexpected token import
at src/main/typescripts/polyfills.ts:1
If I make 如果我做
preprocessors: {
'../src/main/coffee/**/*.coffee': ['webpack'],
'../src/main/typescripts/**/*.ts': ['webpack'],
'../src/test/**/*.coffee': ['coffee']
},
Into something like... 变成像......
preprocessors: {
'./src/main/coffee/**/*.coffee': ['webpack'],
'./src/main/typescripts/**/*.ts': ['webpack'],
'./src/test/**/*.coffee': ['coffee']
},
I get 我明白了
path: '/_karma_webpack_/src/main/coffee/utilities/view/My.coffee' }
路径:'/ _ karma_webpack_/src/main/coffee/utilities/view/My.coffee'}
Error: no such file or directory
错误:没有这样的文件或目录
Update 更新
Ok so here is the deal I can tell webpack is not running in my case. 好的,这就是我可以告诉webpack在我的情况下没有运行的交易。 That is why transpiling isn't working the question remains why?
这就是为什么转换不起作用的原因仍然是为什么?
I am doing this almost exactly like https://github.com/AngularClass/angular2-webpack-starter . 我这样做几乎完全像https://github.com/AngularClass/angular2-webpack-starter 。 The only thing is it doesn't work when I reference the karma conf like they do with
module.exports = require('./config/karma.conf.js');
唯一的一点是当我引用karma conf时它不起作用就像使用
module.exports = require('./config/karma.conf.js');
. 。 It seems to have no issue if I move the actual karma conf into the root folder (it is currently in
src/build/karma.conf.js
) 如果我将实际的业力conf移动到根文件夹(它当前在
src/build/karma.conf.js
)似乎没有问题
Update 2 更新2
I tried to move the webpack.test.js to the root folder and tried to configure for using that file again but it still fails so I have to go back to webpack.config.js 我试图将webpack.test.js移动到根文件夹并尝试再次配置使用该文件,但它仍然失败,所以我必须回到webpack.config.js
webpack.test.js webpack.test.js
// TODO: I would like this in the source folder but karma-webpack fails
const webpack = require("webpack");
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./src/build/webpack.common.js'); // the settings that are common to prod and dev
const glob = require('glob-all');
const tests = glob.sync([
'./src/test/webapp/**/*.coffee'
]);
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
module.exports = function (options) {
return webpackMerge(commonConfig({env: ENV}), {
entry: {
tests: '../src/test/**/*.coffee'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['tests', 'styles', 'app', 'vendor', 'polyfills'],
minChunks: Infinity
})
]
})
};
webpack.config.js webpack.config.js
var environment = process.env.NODE_ENV || 'development';
switch (environment) {
case 'prod':
case 'production':
module.exports = require('./src/build/webpack.prod')({env: 'production'});
break;
case 'test':
case 'testing':
module.exports = require('./webpack.test.js')({env: 'test'});
break;
case 'dev':
case 'development':
module.exports = require('./src/build/webpack.dev')({env: 'development'});
break;
default:
module.exports = require('./src/build/webpack.common')({env: 'common'});
Uncaught SyntaxError: Unexpected token import
未捕获的SyntaxError:意外的令牌导入
Clear symptom that TypeScript isn't getting compiled before being passed on to the JS runtime. 清除症状是在传递给JS运行时之前没有编译TypeScript。
Change 更改
{test: /\.ts$/, loader: 'ts'},
To: 至:
{test: /\.ts$/, loader: 'ts-loader'},
See quickstart : https://github.com/TypeStrong/ts-loader#configuration 请参阅快速入门: https : //github.com/TypeStrong/ts-loader#configuration
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.