简体   繁体   中英

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.

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. 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.

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)

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"

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. There are no occurrences of 'GlobalAccess' in any files produced. 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

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

Upgrade Webpack from v1.14 to v2.x in order to use export default class instead of just 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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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