Question

我们有Webpack设置，可以为需要转换为ES5的项目提供ES6样式代码，以便IE11可以运行它（IE的项目要求-现在是我们的要求。）

即使这是使用Vue.js和AFAIK，在这里也不是问题。 export值在哪里 。

当我不使用Webpack时，以下代码有效：

Working.cshtml

<div id="app">
  ...
</div>

var vm = new Vue({
  data: {
    ...
  },
  methods: {
    ...
  }
});

$(function () {
  //vm.$mount('#app'); // This works
  var testName = "vm";
  window[testName].$mount("#app"); // This also works
});

我们必须使用$mount的方式（而不是拥有el: "$app"属性，因为我们正在将许多文件打包成一个Web文件。此外，testName变量才发挥作用我将从隐藏字段中读取该真实值，如下所示。

这是页面实际需要的内容，而页面不起作用：

TestPortable.js

const testPortable = new Vue({
  data: {
    ...
  },
  methods: {
    ...
  },
  created: function () {
    console.log(" * Created testPortable"); // This shows
  },
  mounted: function () {
    console.log(" * Mounted testPortable"); // Never gets here
  }
});

export default testPortable;

这是上面带有HTML标记的文件，需要查找testPortable变量。

Current.cshml

<input type="hidden" id="hdnTestName" value="testPortable" />
<div id="app">
  ...
</div>

<script>
$(function () {
  console.log("Document is Ready");
  var TestName = document.getElementById("hdnTestName").value; // TestName === "testPortable"
  console.log("  Test Name: " + TestName);             // testPortable
  console.log("  on window: " + window[TestName]);     // undefined
  console.log("  on document: " + document[TestName]); // undefined
  console.log("  on this: " + this[TestName]);         // undefined
  console.log("  on force: " + window.testPortable);   // undefined
  window[TestName].$mount("#app");                     // Cannot read property '$mount' of undefined TypeError: Cannot read property '$mount' of undefined
  console.log("  Post Mount Call");                    // Never gets here
});
</script>

因此，正如问题所问，testPortable const在哪里？我查看了呈现的app.js文件，并确实看到它在其中。

app.js

...
(function (module, exports, __webpack_require__) {
  "use strict";
  var _vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.js");
  var _vue2 = _interopRequireDefault(_vue);

  var testPortable = new _vue2.default({
    ...
  });
});
...

我已经很接近完成这项工作了，但是无法解决scope这个问题。

Answer 1

在output的{{1}}下，您可以将libraryTarget值添加到'window'选项中，并与library一起设置名称，例如library: '[name]' （将使用条目/捆绑名称）：

output: {
    library: '[name]',
    libraryTarget: 'window'
}

假设您的类/模块已导出（以您的“ testPortable”为例）：

export const testPortable = new Vue({})

，并且您的输入/绑定名称为app，那么您应该可以使用window.app.testPortable或window.app['testPortable']

访问它

注意：您需要确保首先使用DOMContentLoaded / $(document).ready()

加载了捆绑软件

您可能要进一步查看Webpack有关输出选项的文档：https://webpack.js.org/configuration/output/#output-library

Webpack的CONST适用范围

1 个答案: