Fatal编程技术网
  • javascript/
  • 为浏览器编译javascript的网页包

为浏览器编译javascript的网页包

javascript node.js webpack

为浏览器编译javascript的网页包,javascript,node.js,webpack,Javascript,Node.js,Webpack,谢谢你的关注！ 我已经用webpack从我的源代码中构建了一个javascript文件，我本打算在brower中使用它，但它似乎对我不起作用，所以我将此发布以寻求帮助 这是我的项目树 project ├── dist │   └── my-dist.js ├── index.js ├── lib │   └── my-source.js └── webpack.config.js 这是my-source.js 'use strict' const somepackage = require(

谢谢你的关注！ 我已经用webpack从我的源代码中构建了一个javascript文件，我本打算在brower中使用它，但它似乎对我不起作用，所以我将此发布以寻求帮助 这是我的项目树

project
├── dist
│   └── my-dist.js
├── index.js
├── lib
│   └── my-source.js
└── webpack.config.js
这是my-source.js

'use strict'

const somepackage = require("somepackage")

module.exports = MyPkg

function MyPkg(param) {
    this.myprop = param
}

MyPkg.prototype.Afunc = function () {
    consolg.log("hello from A ", this.myprop)
}

MyPkg.prototype.Bfunc = function (param) {
    // B do some thing
}
这是我的index.js

exports = module.exports = require('./lib/MyPkg');
这是我的webpack.config.js

const path = require('path')
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-dist.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env']
                }
            }
        }]
    }
}
然后我运行“webpack”来构建文件，看起来还可以，并且创建了“my-dist.js”文件，所以我尝试这样使用它：

<html>
<head>
</head>
<body>
    <div>
        <button onclick="func()">click here</button>
    </div>
</body>
<script src="dist/my-dist.js"></script>
<script>
    var pkg = new MyPkg('haha')
    function func() {
        pkg.Afunc()
    }
</script>
</html>


点击这里
var pkg=new MyPkg（'haha'）
函数func（）{
pkg.Afunc（）
}
但它会抛出类似“未捕获引用错误：MyPkg未定义”的错误，我真的不知道如何修复它，请帮我一把，谢谢大家~

编辑x2: 以下是GitHub回购协议，并提供了进一步解释：

如果我没记错的话，我过去就有过这个问题。从您的输入文件中对JavaScript进行网页打包，以便没有其他文件或代码可以直接访问它

因此，在index.html中，此将不起作用

<script>
    var pkg = new MyPkg('haha')
    function func() {
        pkg.Afunc()
    }
</script>
注: 我们添加了“DOMContentLoaded”事件，以便在进行任何操作之前等待DOM加载。如果不这样做，可能会导致未定义按钮，因为浏览器引擎可能无法解析或呈现该按钮

编辑：下面是更详细的方法

假设您具有以下结构：

----index.html
----index.js
----Email/
---------email.js
----Validator/
---------validator.js
而index.js是您的主条目文件（Webpack在其中加载JavaScript）

Email.js内容：

// Ficticious/non-existent npm package
import email from 'send-email'
// Custom and ficticious email class that will send emails
export class Email {
   sendEmail(subject, message) { 
       // You would send the email somehow.
       email.send('contact@support.com' this.subject, message); 
   }
}

// Checks if the value is undefined or null
module.exports = function (value) {
    return !!value
}
Validator.js内容：

// Ficticious/non-existent npm package
import email from 'send-email'
// Custom and ficticious email class that will send emails
export class Email {
   sendEmail(subject, message) { 
       // You would send the email somehow.
       email.send('contact@support.com' this.subject, message); 
   }
}

// Checks if the value is undefined or null
module.exports = function (value) {
    return !!value
}
在index.html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="name" id="js-name" placeholder="message" />
    <textarea id="js-msg" placeholder="Write us a message"></textarea>
    <button id="js-send">Send us a message!!</button>
    <!-- Awful Real-life example -->
    <button id="js-validate">Validate Text!</button>
    <script src="index.js"></script>
</body>
</html>


文件
给我们发个信息！！
验证文本！
在index.js（网页包的主文件）中：

//我们导入要使用的电子邮件类
从“./Email/Email.js”导入{Email}
//我们还添加了验证器
从“./validator/validator.js”导入验证程序
/**
*现在是真正的魔法。Webpack定义变量和函数名的范围，更改
*正常值，以避免与其他函数和变量发生冲突（我可能有错）。
* 
*尽管如此，JavaScript允许我们通过事件监听器以编程方式将这些函数附加到元素。
* https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
*这意味着onclick（）事件是相同的

*as element.addEventListener（'click'，func）；其中元素是ok，只需将其保存在记录中即可。
我想出了一个特别的方法，这里看起来像：


project
├── dist
│   └── my-dist.js
├── src
│   └── my-entry-build.js
├── index.js
├── lib
│   └── my-source.js
└── webpack.config.js


项目树现在如下所示：


project
├── dist
│   └── my-dist.js
├── src
│   └── my-entry-build.js
├── index.js
├── lib
│   └── my-source.js
└── webpack.config.js


我更新了“webpack.config.js”和“my entry build.js”，其他人保持静止

新的“webpack.config.js”如下所示：

新的“my entry build.js”如下所示：


const MyPkg = require('../index.js')
window.MyPkg = MyPkg



一切都完成了
 但是。。。这是Node.js。这是一个服务器端环境。您正在尝试在浏览器中运行节点代码吗？我遗漏了什么？如果我没记错的话，webpack将函数的作用域排除在全局作用域之外。在英语中，这意味着您不能通过my-dist.js之外的正常方式访问函数。建议将您需要的所有代码都放在该文件中。如果您需要进一步解释，请告诉我。@JoseA是的，如果我想让这项工作顺利进行，我应该如何更改我的帐户code@JeremyThille实际上它在vue.js中工作，vue.js不是浏览器应用程序吗？是的，但你没有提到Vuethanks对我的帮助，但它对我仍然不起作用，以下是我在代码中所做的，请查看\n文档。addEventListener（'DOMContentLoaded'，function（）{document.getElementById（'js-pkg'）。addEventListener（MyPkg）；}；函数func（）{var pkg=new MyPkg（'haha'）pkg.Afunc（）}这是另一个函数，尽管我建议不要污染窗口对象（因为这是Webpack要防止的），但请确保不要覆盖window.MyPkg或在全局级别（在任何函数之外）定义var MyPkg，因为它将被覆盖！！！（您的解决方案有点类似于jQuery之类的库所做的工作……如果项目进展顺利，请小心！！）@JoseA谢谢！我对如何通过“DOMContentLoaded”的方式使用它很感兴趣，请您详细介绍一下好吗？当然可以！检查我的原始答复！！如果您需要进一步澄清，请告诉我@JoseA我试过了，但它对我不起作用，所以是的，我需要进一步澄清我不会放弃！我也遇到过同样的情况！这里有一个repo-Check/src/index.js，我已经记录了代码，所以您可以查看它！！

const MyPkg = require('../index.js')
window.MyPkg = MyPkg