2017-08-08 60 views
0

我不知道如何解决这个由我的import引起的SyntaxError。我不认为我配置了我的WebPack正确和不确定如何解决它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

进口从“期待”期待;

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" 
    ] 
} 

项目结构

enter image description here

回答

1

import可能未被识别,因为从ES2015通过babel进行的转录未发生。这可能与您的.babelrc的位置有关。如果.babelrc不在同一目录webpack.config.js,你要么必须移动,或手动加载它:

{test: /\.js$/, use: {loader: 'babel-loader', options: require(/* path to babelrc */)}}, 
+0

刚刚检查。它处于同一水平。我可以添加项目结构的照片 – Liondancer

+0

如果您仍然需要这种方式,它会影响错误吗? – colavitam

+1

添加了你提到的'require'部分,我仍然得到相同的错误= [ – Liondancer

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\"", 
相关问题