浏览器抛出导出/导入关键字的错误，甚至安装了webpack和babel

Question

我正在使用核心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时，它将在控制台中引发错误

未捕获到的SyntaxError：意外的令牌导出。 Alphabet.js：30

我也注意到有build文件夹下没有bundle.js文件作为webpack.config.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 --version
  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文件的主要怀疑

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">比它抛出错误

未捕获到的SyntaxError：意外令牌{

即导入和导出关键字无法识别

如何解决这个问题呢？

Answer 1

如果您的目标是启用使用import和export语句，则应在脚本标签上使用module类型：

<script type="module" ... />

不支持此功能的旧版浏览器会忽略此设置，这意味着您可以确保旧版浏览器甚至不尝试解析它。 为了确保较新的浏览器不会解析旧代码，可以使用nomodule ：

<script type="text/javascript" nomodule ... />

有关使用<script>标记的更多信息，请参见MDN文档，例如： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Answer 2

1：webpack-dev-server将捆绑包直接构建到内存中，这就是为什么最好使用html-webpack-plugin，因此将捆绑包自动地插入到html中的原因。

2：之所以收到此错误，是因为您引用的是es6文件，而不是实际的软件包。 这可能不适用于所有浏览器。

---

要使用html-webpack-plugin只需将其添加到您的构建中即可。 附言：这希望您有一个基本的html，它将插入资产。

https://github.com/jantimon/html-webpack-plugin

plugins: [
    new HtmlWebpackPlugin({
      template: 'path/to/my/index.html'
    })
  ]