时间戳

首页 > 解决方案 > 返回实例化类 + babel JS

javascript - 返回实例化类 + babel JS

问题描述

我正在 JS 上构建一个“库”，并且必须只有一个 .js 文件。

我刚刚开始构建，直到现在我才得到这个：

app-es6/main.js

class Sjs {

    create(obj) {
        console.log(obj);
    }

}

索引.html

<script src="app/main.js"></script>

<script>
    let sjs = new Sjs();
    sjs.create({
        type: 'select'
    });
</script>

.babelrc

{
    "presets": ["es2015"]
}

我需要做什么：

1）类不应该在html中实例化，实例应该从js准备好，所以我可以输入sjs.create()，比如jQuery、moment等。

2）如果我需要导入更多的 JS 文件，以构建更结构化的东西，我可以“包装”到单个 js，最小化吗？

谢谢指教。

标签： javascriptecmascript-6babeljs

解决方案

1）类不应该在html中实例化，实例应该从js准备好，所以我可以输入sjs.create()，比如jQuery、moment等。

只需将其放在声明main.js后的 , 中class即可：

let sjs = new Sjs();

let在全局范围内创建一个全局变量（尽管不是全局对象上的属性[通常window在浏览器上访问]）。如果您也想要该属性，请使用var而不是let或分配给window.sjs（这也将创建一个全局变量；全局对象上的所有属性都是全局变量，只是从 ES2015 开始，并非所有全局变量都是全局对象上的属性）。

也就是说，如果它是一个单例，那么使用class. 可能还值得注意的是，jQuery 和 MomentJS 都公开了函数( jQuery/ $, moment)，而不是不可调用的对象。

2）如果我需要导入更多的 JS 文件，以构建更结构化的东西，我可以“包装”到单个 js，最小化吗？

您正在寻找一个bundler，例如Webpack、Rollup等。他们有用于与Babel集成、进行缩小、...

推荐阅读