Я занимаюсь разработкой очень простого и простого приложения с ядром javascript и html.
Я установил webpack v 4 и запустил сервер, используя
npm run webpack
проект успешно скомпилирован; ниже вывод
> canvas@1.0.0 webpack /opt/parixan/canvas
> webpack-dev-server --inline --hot
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 99985e9b8632c783a375
Version: webpack 4.12.1
Time: 819ms
Built at: 2018-06-30 18:45:48
Asset Size Chunks Chunk Names
bundle.js 354 KiB main [emitted] main
bundle.js.map 406 KiB main [emitted] main
Entrypoint main = bundle.js bundle.js.map
[./js/color.js] 359 bytes {main} [built]
[./js/index.js] 628 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/sockjs-client/dist/sockjs.js] 176 KiB {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./js/index.js 52 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.6 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {main} [built]
+ 14 hidden modules
ℹ ｢wdm｣: Compiled successfully.
но когда я перехожу на localhost: 8080 / alphabet.html , в консоли выдается ошибка
Uncaught SyntaxError: Неожиданный экспорт токена. alphabet.js: 30
Я также заметил, что в папке build , как указано в webpack.config.js
, нет файла
bundle.js .
вот моя структура папок
├── README.md
├── alphabet.css
├── alphabet.html
├── build
├── fruits
├── js
├── alphabet.js
├── color.js
└── index.js
├── .babelrc
├── package.json
└── webpack.config.js
- узел -v 8.9.2
- npm -v 5.5.1
- macOS -v 10.13.3
- babel - версия
6,26,0 (бабел-ядро 6,26,3)
.babelrc
{
"presets": ["@babel/preset-env"]
}
* * Package.json тысяча сорок-девять
"scripts": {
"webpack": "webpack-dev-server --inline --hot",
"start": "http-server"
},
"main": "./js.index.js",
"devDependencies": {
"@babel/core": "^7.0.0-beta.51",
"babel-loader": "^8.0.0-beta.4",
"babel-register": "^6.26.0",
"jsxobj": "^1.1.0",
"webpack": "^4.12.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"@babel/preset-env": "^7.0.0-beta.51",
"babel-eslint": "^7.2.3",
"babel-preset-es2015": "^6.24.1",
"path": "^0.12.7"
}
webpack.config.js
module.exports = {
context: __dirname,
entry: "./js/index.js",
mode: "development",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
},
devtool: "source-map",
resolve: {
extensions: [".html", ".js", ".json", ".css"]
}
};
/ JS / index.js
import { fetchImage } from "./alphabet.js";
import { color } from "./color.js";
const colorBox = color;
console.log("colorBox", colorBox);
const len = Object.keys(colorBox).length;
fetchImage(colorBox);
JS / alphabet.js
export const fetchImage = letter => {
const fruit = fruits[letter] || "tamarindo";
const request = new Request(`./fruits/${fruit}.png`, myInit);
fetch(request)
.then(response => response.blob())
.then(blob => {
const objectURL = URL.createObjectURL(blob);
const img = new Image(200);
img.src = objectURL;
let element = document.getElementById("figure");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(img);
});
};
Мое главное сомнение в этом alphabet.html file
alphabet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alphabet</title>
<link rel="stylesheet" href="./alphabet.css">
</head>
<body>
<div class="content" >
<section class="alphabet"></section>
<figure id="figure"></figure>
</div>
<script src="./js/alphabet.js"></script>
</body>
</html>
Если я изменю <script src="./js/index.js">, то это выдаст ошибку
Uncaught SyntaxError: Неожиданный токен {
т.е. import и export ключевое слово не распознано
Как решить эту проблему?