时间戳

首页 > 解决方案 > babel webpack 导入导出关键字不起作用

javascript - babel webpack 导入导出关键字不起作用

问题描述

我现在用 js 创建了一个简单的 HTML 页面来添加更多功能我添加了 webpack 并安装了一些节点包并运行npm start webpack它开始正常，我可以访问 localhost:8080 但它抛出了 import 和 export 关键字的错误。

包.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack-dev-server --inline --hot",
    "start": "http-server"
},

"devDependencies": {
    "@babel/core": "^7.0.0-beta.51",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "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-eslint": "^7.2.3",
    "babel-preset-es2015": "^6.24.1",
    "path": "^0.12.7"
  }

webpack.config.js

var nodeExternals = require("webpack-node-externals");
module.exports = {
  entry: "./js/index.js",
  mode: "development",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  target: "node",
  externals: [nodeExternals()],
  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", ".less"]
  }
};

js/index.js

import { fetchImage } from "../alphabet.js";

let i = 0;
const colorBox = {
    red: "#f00000",
    green: "#38c138",
    blue: "#0a6de8",
    orange: "#e69110",
    chocolate: "#1b1818",
    purple: "#632363",
    yellow: "#f1e904",
    bottle: "#102923",
    black: "#000000",
    white: "#d4d4d4"
};

const len = Object.keys(colorBox).length;

document.addEventListener(
    "keydown",
    e => {
        const key = e.key;
        i++;
        i = i % len == 0 ? 1 : i;
        let qs = document.querySelector(".alphabet");
        document.body.style.backgroundColor = Object.values(colorBox)[i];
        let str = key.toUpperCase();
        qs.innerHTML = str;
        fetchImage(key);
    },
    false
);

字母表.html

"use strict";

const fruits = {
  a: "apple",
  b: "banana",
  c: "coconut",
  e: "elephant",
  g: "grapes",
  l: "lemon",
  m: "mango",
  o: "orange",
  p: "pineapple",
  s: "strawberry",
  t: "tomato"
};

export const fetchImage = letter => {
  console.log("letter", letter);
  const myHeaders = new Headers({
    "Content-Type": "image/jpeg"
  });
  const myInit = {
    method: "GET",
    headers: myHeaders,
    mode: "same-origin"
  };

  const fruit = fruits[letter] || "tamarindo";
  console.log("fruit", fruit);

  const myRequest = new Request(`./fruits/${fruit}.png`, myInit);

  fetch(myRequest)
    .then(function(response) {
      return response.blob();
    })
    .then(function(myBlob) {
      console.log("inside then");
      var objectURL = URL.createObjectURL(myBlob);
      const img = new Image(200);
      img.src = objectURL;
      let element = document.getElementById("figure");
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
      element.appendChild(img);
    });
};
.content {
  display: grid;
  grid-template: auto/ repeat(2, 1fr);
  align-items: center;
  justify-content: center;
  justify-items: center;
  color: white;
  grid-gap: 10px;
  font-weight: 700;
  font-family: 'Open Sans';
  text-transform: uppercase;
  background-color: transparent;
}

.alphabet {
  font-size: 25em;
}
<body>
  <div class="content">
    <section class="alphabet"></section>
    <figure id="figure"></figure>
  </div>
  <script src="./js/index.js"></script>
</body>

字母.js

.babelrc

{{
    "presets": ["env", {
      "targets": {
        "node": "current"
      }
    }]
}

如何制作简单的 JS 程序来理解导出和导入关键字？

标签： javascriptwebpack

解决方案

你target: node在 webpack 中使用，它不应该在浏览器上工作，尤其是 nodeExternals。尝试删除以下行：

  • target: "node": 当脚本将被 nodejs 使用时使用，只需将其删除，它将target: "browser"默认设置为。
  • externals: [nodeExternals()]- 这意味着不要将这些包捆绑到生成的文件中，但在这种情况下浏览器将无法找到它们。只需删除此行。

更新

工作要点

主要变化：

  • 更新的脚本index.html
  • package.json：为简单起见，删除了不必要的包并更新了与 babel 相关的包（以便与 babel 7 一起使用），并更新webpack了脚本（见评论）
  • webpack.config.js：删除target: "node"和所有与节点相关的东西

推荐阅读