我不确定如何修复由import
引起的这个SyntaxError。我认为我没有正确配置我的webpack并且不确定如何解决它
ERROR
/Users/bradfordli/Development/projects/businesses/jifts/jifts/app/tools/index.test.js:1
(function (exports, require, module, __filename, __dirname) { import expect from 'expect';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at /Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/lib/mocha.js:230:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/lib/mocha.js:227:14)
at Mocha.run (/Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/lib/mocha.js:513:10)
at Object.<anonymous> (/Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/bin/_mocha:480:18)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:504:3
npm ERR! Test failed. See above for more details.
index.test.js
导入期望来自'expect';
describe('First', () => {
it('pass', () => {
expect(true).toEqual(true);
});
});
的package.json
{
"name": "jifts",
"version": "1.0.0",
"description": "Share, don't waste.",
"main": "index.js",
"scripts": {
"test": "./node_modules/.bin/mocha --reporter progress app/tools/testSetup.js \"app/**/*.test.js\"",
"build": "",
"watch": "./node_modules/.bin/webpack --watch --progress",
"start": "./node_modules/.bin/npm-run-all --parallel lint:watch",
"lint": "./node_modules/.bin/esw webpack.config* app",
"lint:watch": "npm run lint -- --watch"
},
"author": "Bradford Li",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"redux": "^3.7.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"eslint": "^4.3.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-react": "^7.1.0",
"eslint-watch": "^3.1.2",
"expect": "^1.20.2",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"mocha": "^3.5.0",
"npm-run-all": "^4.0.2",
"style-loader": "^0.18.2",
"webpack": "^3.4.1",
"webpack-bundle-tracker": "^0.2.0",
"webpack-dev-server": "^2.6.1"
}
}
webpack.config
import path from 'path'
import webpack from 'webpack';
import BundleTracker from 'webpack-bundle-tracker';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
module.exports = {
entry: {
app: './app/index.js'
},
devtool: 'inline-source-map',
target: 'web',
output: {
path: path.resolve('./app/bundles/'), // Note: Physical files will not be created during development. Files are served in memory
filename: '[name]-[hash].js'
},
plugins: [
new CleanWebpackPlugin(['./app/bundles/']),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new BundleTracker({
filename: './webpack-stats.json'
}),
// allows all kinds of modules to be updated at runtime without the need for a full refresh
new webpack.HotModuleReplacementPlugin(),
// Keeps errors from breaking our Hot Reload experience
new webpack.NoErrorsPlugin()
],
// Tells webpack-dev-server to serve file from the app directory on localhost:8080
devServer: {
contentBase: './app',
// required for HotModuleReplacement
hot: true
},
module: {
rules: [
{test: /\.js$/, use: {loader: 'babel-loader'}},
{test: /\.css$/, use: ['css-loader', 'style-loader']},
{test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']},
// for fonts
{test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']}
]
}
};
.babelrc
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 Firefox versions",
"last 2 Chrome versions",
"Firefox ESR",
"last 3 Safari versions",
"last 2 iOS versions",
"ie 11"
]
}
}
],
"react",
"es2015"
]
}
项目结构
答案 0 :(得分:1)
NA | TRUE #output :TRUE
FALSE & NA #output :FALSE
可能无法被识别,因为从ES2015通过babel传播不会发生。这可能与您import
的位置有关。如果.babelrc
与.babelrc
不在同一目录中,则您必须移动它或手动加载它:
webpack.config.js
答案 1 :(得分:1)
我收到此错误是因为mocha
未使用babel
而且不知道如何解释es6
在package.json
中更改此内容。补充:--compilers js:babel-core/register
"test": "./node_modules/.bin/mocha --compilers js:babel-core/register --reporter progress app/tools/testSetup.js \"app/**/*.test.js\"",