Home / Questions / 56481
Accepted
Lorthas
Asked: 2020-03-20 16:00:05 +0800 CST 2020-03-20 16:00:05 +0800 CST

使用 ES6 导出和导入模块会报错吗？

  • 772

我正在尝试学习在 ES6 中导出和导入模块，它在控制台中告诉我： SyntaxError: export declarations may only appear at top level of a module

我正在尝试一些简单的东西。我有这样的代码：

文件.js

export default const modulo = function(){
    alert("Hola mundo");
};

然后我可以在脚本标签内的 html 页面中执行以下测试吗？ page.html

import modulo  from 'archivo.js';

根据MDN，它应该可以工作，但只有导出已经给出了错误。

为什么这么复杂？你不能改用显示模式吗？ES6 模块与具有返回对象（IIFE）的立即可执行函数的 Revealing 方法相比有什么优势？使用这些导入/导出可以防止您必须使用 ? 导入 .js。

javascript

2 Answers

  1. Best Answer

    你不能只使用显示模块模式吗？

    你可以完美地做到这一点，事实上，没有什么能阻止你。JavaScript 非常灵活，有很多方法可以做同样的事情。RMP 与 CommonJS、RequireJS、UMD 和 ES6 模块具有相同的目标；使用其中一个是个人判断的问题。

    RMP 是一种设计良好且结构化的模式，它允许您以实用且简单的方式编写带有私有变量/函数的模块。事实是，它既有优点也有缺点。

    优势

    • 实用且易于实施。
    • 提供简单的封装。

    缺点

    • 覆盖私有变量。

    众所周知，RMP 在覆盖私有属性方面有一个弱点，因为需要设置器，因为对象字面量不能用作原型。如果您不使用 getter，则需要使用，this因为您需要将变量直接放入对象字面量中，这当然打破了这种模式的意识形态。

    function House (data) {
  let { height, width, large } = data;
  
  return {
    height,
    width,
    large,
    info () {
      console.log('Height:', height);
      console.log('Width:', width);
      console.log('Large:', large);
    }
  };
}

let home = new House({
  height: 3.1,
  width: 7.25,
  large: 18.75
});

// se espera que se pueda sobreescribir
home.height = 3.2;

home.info(); // ups

    ES6 模块与具有立即执行函数并返回对象 (IIFE) 的 Revealing 模式相比有什么优势？

    其实没有什么优点值得强调，除了：

    • 标准化：未来每个模块都将（可能）使用 ES6 模块编写。
    • 组织：代码更有条理，因为它允许您进行两种类型的导出（默认和独立）。
    • 优化：避免了模块模式的不同实现的常见缺陷和缺点，例如私有和公共 RMP 变量/函数之间的引用。

    使用这些导入/导出可以防止您必须在 html 中导入带有标签的 .js？

    ES6 模块与导入 HTML 脚本无关。在这方面没有任何改变。

    额外的

    迄今为止，除了 Safari Preview，没有浏览器支持 ES6 模块，但这不是问题，因为使用 Babel，我们不仅可以移植 ES6 代码，还可以移植来自第 2 阶段的 ES7/8 和 ECMA 提案。 Traspile 你只需要安装全局打包babel-cli和您想要的预设。例如：

    npm i babel-cli babel-preset-es2015 -g

    然后将任何模块备份到 ES5：

    babel source.js --out-file target.js --presets=es2015

    它生成的 ES5 代码与当今任何旧的和现代的浏览器都兼容。

    • 1

  2. 浏览器还没有 100% 支持 ES6，这里你可以看到一个兼容性表。

    这种格式的思想是将类封装起来，从而将它们分离到不同的文件中。它是为像我这样来自面向对象语言的人制作的（非常感谢！！！:)）。例如，您的函数将这样编写：

    // hola.jsx
let modulo = () => {
  alert('Hola mundo')
}
export default modulo

    并像我们已经知道的那样导入它

    // main.jsx
import modulo from './hola.jsx'

    现在我们的文件中可以有几个类

    // misclases.jsx
export class MiClase1 {}
export class MiClase2 {}
export class MiClase3 extends MiClase1 {}

    当我们导入它时，我们这样做

    import {MiClase2, MiClase3} from './misclases.jsx'

    然后编译器将其翻译成所有浏览器都知道的内容。当我说编译器时，我的意思是babel，所以你必须“babelize”你的代码，它通常会将所有东西编译成一个。例如，我使用这些依赖项来处理一个 react 项目，并且我有一些脚本来编译和测试它。

        "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "*",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "webpack": "^2.1.0-beta.27",
    "browser-sync": "*"
  }
"scripts": {
    "run": "npm run build && browser-sync start --server --startPath \"www\"",
    "build": "browserify main.jsx -o www/bundle.js -t [ babelify --presets [ es2015 react ] ] ",
    "browser": "browser-sync start --server \"www\"",
    • 0