简体   繁体   English

如何在完全独立的Webpacked应用程序中访问Javascript

[英]How to access Javascript in a completely separate webpacked app

I'm working on an existing large client side web app, transpiled with Babel and Webpacked. 我正在使用Babel和Webpacked转译的现有大型客户端Web应用程序。

I'm writing a separate small project that needs to tap into the existing code, but without access to it in the local filesystem. 我正在编写一个单独的小项目,该项目需要利用现有代码,但是无法在本地文件系统中访问它。 This is a Node/web app that will work as a test harness to allow remote developers to create assets that interface with our app. 这是一个Node / web应用程序,将用作测试工具,允许远程开发人员创建与我们的应用程序接口的资产。 What I need to do is be able to import and use any JS classes that the main app exports / uses, without having that code on the local filesystem. 我需要做的是能够导入和使用主应用程序导出/使用的所有JS类,而无需在本地文件系统上使用该代码。

The answers to this question point to using the library option in the output section of webpack config: Calling webpacked code from outside (HTML script tag) 该问题的答案指向在webpack配置的输出部分中使用库选项: 从外部调用Webpacked代码(HTML脚本标记)

I've used the suggestion below the main answer for multiple entry points in one of the comments, eg: "We have multiple entry points, so in the output section, I instead made it library: ["GlobalAccess", "[name]"],. That then make the var be an object with members for each entrypoint: GlobalAccess.EntryPointFoo, GlobalAccess.EntryPointBar, etc" 我已经在主要回答下面的建议中为其中一个注释中的多个入口点使用了建议,例如:“我们有多个入口点,因此在输出部分,我改为将其设置为库:[“ GlobalAccess”,“ [name] “]。然后使var成为具有每个入口点成员的对象:GlobalAccess.EntryPointFoo,GlobalAccess.EntryPointBar等。”

My output section looks like this: 我的输出部分如下所示:

output: {
    // the name of the output file (i.e. same as the input file)
    path: './',
    library: ['GlobalAccess', '[name]'],
    filename: '[name].js'
}

However, after doing a build, the output chunks from Webpack are exactly the same as without this option. 但是,完成构建后,Webpack的输出块与不带此选项的输出块完全相同。 There are no occurrences of 'GlobalAccess' in any files produced. 生成的任何文件中均不存在“ GlobalAccess”。 What should I see in the output chunks that tells me its worked?? 我应该在输出块中看到什么来告诉我它的工作原理? The official documentation is pretty sparse.. https://webpack.js.org/configuration/output/#output-library but this example shows how to set a library up so every entry has a different namespace: https://github.com/webpack/webpack/tree/master/examples/multi-part-library 官方文档非常稀疏。.https ://webpack.js.org/configuration/output/#output-library,但是此示例显示了如何设置库,因此每个条目都具有不同的命名空间: https:// github。 COM /的WebPack /的WebPack /树/主/示例/多部件库

Well, in case anyone else ever comes across this question, which admittedly is a bit of a strange one, I did the following: 好吧,以防万一有人遇到这个问题,这个问题确实有点奇怪,我做了以下工作:

Convert the Webpack build to a library, with 'umd' as the library target 将Webpack构建转换为库,以“ umd”作为库目标

Upgrade Webpack from v1.14 to v2.x in order to use export default class instead of just module.exports 将Webpack从v1.14升级到v2.x,以便使用导出默认类,而不仅仅是module.exports

Turn off Uglification and Chunking 关闭丑化和分块

So that meant I could have a big project compiled in one place using Webpack, and the resulting output file can be imported and used in a completely different project without access to the original. 因此,这意味着我可以使用Webpack在一个地方编译一个大项目,并且可以将生成的输出文件导入并在完全不同的项目中使用,而无需访问原始文件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM