babel webpack import export關鍵字不起作用

Question

我現在用js創建了一個簡單的HTML頁面以添加更多功能，我添加了webpack並安裝了一些節點程序包並運行npm start webpack它可以正常啟動，並且我可以訪問localhost：8080，但是它拋出import和export關鍵字錯誤。

的package.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
);

alphabet.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>

alphabet.js

.babelrc

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

如何使簡單的JS程序理解導出和導入關鍵字？

Answer 1

您正在使用webpack中的target: node ，這在瀏覽器上不起作用，尤其是在nodeExternals上。 嘗試刪除以下行：

target: "node" ：在nodejs使用腳本時使用，只需將其刪除，默認情況下它將被設置為target: "browser" 。
externals: [nodeExternals()] -表示不要將這些軟件包捆綁到生成的文件中，但是在這種情況下，瀏覽器將無法找到它們。 只需刪除此行。

更新

工作要點

主要變化：

index.html更新腳本
package.json ：為簡單起見，刪除了不必要的軟件包並更新了與babel相關的軟件包（以便與babel 7一起使用），並更新了webpack腳本（請參見評論）
webpack.config.js ：刪除了target: "node"以及所有與節點相關的東西

babel webpack import export關鍵字不起作用

問題描述

的package.json

webpack.config.js

JS / index.js

alphabet.html

alphabet.js

.babelrc

1 個解決方案

解決方案1
1 已采納 2018-06-29 14:30:15

更新

babel webpack import export關鍵字不起作用

問題描述

的package.json

webpack.config.js

JS / index.js

alphabet.html

alphabet.js

.babelrc

1 個解決方案

解決方案1 1 已采納 2018-06-29 14:30:15

更新

解決方案1
1 已采納 2018-06-29 14:30:15