cda*_*win 8 javascript bundle browserify webpack
我有一个test.js脚本,它定义一个类,App并从HTML文件加载,所有工作.
当我使用browserify或webpack 创建一个testBundle.jsbundle时test.js,App里面的类testBundle.js似乎没有更多定义.
我应该如何编写代码或者我应该给browserify提供哪些选项以获取App定义并像以前一样从HTML中使用它,但是从捆绑包中？
捆绑后我得到的错误是:
Uncaught ReferenceError: App is not defined
html文件如下:
<html>
<script src="testBundle.js"></script>
<script>
var app = new App();
</script>
</html>
test.js:
'use strict';
class App {
constructor() {
console.log("App ctor")
}
}
构建捆绑包的命令:
browserify -t [ babelify --presets [ es2015 ] ] test.js -o testBundle.js
在我看来,在包内看,App实际上是私有的.
testBundle.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var App = function App() {
_classCallCheck(this, App);
console.log("App ctor");
};
},{}]},{},[1]);
所有这些都使用来自浏览器的Javascript,ES6.
fvg*_*vgs 10
您正尝试App在全局范围内访问.但是,App默认情况下,全局不可用.Node.js使用模块,Browserify尊重封装模块提供的.使用Browserify或Webpack等工具时,最常见的是有一个或多个入口点模块(即文件)使用模块导入/ require()来访问其他模块.
但是,如果您希望能够App在浏览器中的全局上下文中进行访问,则可以将该App类的引用分配给windowtest.js中的属性:
例如
window.App = App;
要么
Object.assign(window, { App });
本质上，您想要做的是创建一个库而不是常规包。如果您使用 webpack，您可以指定您希望输出成为一个库，这将使其通过命名空间在全局范围内可用，类似于 jQuery。
// relevant part of your webpack config
// from webpack docs
{
output: {
// export itself to a global var
libraryTarget: "var",
// name of the global var: "Foo"
library: "Foo"
}
}
然后你可以通过 Foo 调用所有函数：
var app = new Foo.App()
var somethingElse = Foo.doSomethingElse()
文档和示例：https ://webpack.github.io/docs/library-and-externals.html#examples
| 归档时间： |
|
| 查看次数： |
602 次 |
| 最近记录： |