Javascript SyntaxError:意外的令牌导入。网页包配置
我不确定如何修复由我的Javascript SyntaxError:意外的令牌导入。网页包配置,javascript,webpack,ecmascript-6,Javascript,Webpack,Ecmascript 6,我不确定如何修复由我的导入引起的这个语法错误。我认为我没有正确配置我的网页包,也不确定如何修复它 错误 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/to
导入引起的这个语法错误。我认为我没有正确配置我的网页包,也不确定如何修复它
错误
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']}
]
}
};
B.法律改革委员会
{
"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"
]
}
项目结构
导入
可能无法识别,因为ES2015未通过巴贝尔进行传输。这可能与.babelrc
的位置有关。如果.babelrc
与webpack.config.js
不在同一目录中,则必须手动移动或加载它:
{test: /\.js$/, use: {loader: 'babel-loader', options: require(/* path to babelrc */)}},
导入
可能无法识别,因为ES2015未通过巴贝尔进行传输。这可能与.babelrc
的位置有关。如果.babelrc
与webpack.config.js
不在同一目录中,则必须手动移动或加载它:
{test: /\.js$/, use: {loader: 'babel-loader', options: require(/* path to babelrc */)}},
我得到这个错误是因为mocha
没有使用babel
并且不知道如何解释es6
在我的package.json中更改了此选项。添加:--编译器js:babel核心/寄存器
"test": "./node_modules/.bin/mocha --compilers js:babel-core/register --reporter progress app/tools/testSetup.js \"app/**/*.test.js\"",
我得到这个错误是因为mocha
没有使用babel
并且不知道如何解释es6
在我的package.json中更改了此选项。添加:--编译器js:babel核心/寄存器
"test": "./node_modules/.bin/mocha --compilers js:babel-core/register --reporter progress app/tools/testSetup.js \"app/**/*.test.js\"",
刚查过。这是在同一水平。我可以添加项目结构的照片,如果你以这种方式需要它,它会影响错误吗?添加了你提到的require
部分,我仍然得到相同的错误=[刚刚检查。它处于同一级别。我可以添加项目结构的照片。如果您以这种方式需要它,它会影响错误吗?添加了您提到的require
部分,我仍然会收到相同的错误=[