• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

TypeScript application and Webpack bundling

Explorer ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

I'm looking to build an angular app (my enviroment is VS2017) with some libraries and having some difficulties with the appropriate configuration.

Can someone provide the minimum webpack config file which one should use, considering a TypeScript-based application is built and bundled?

I've looked at sberic's Node enabled post and think there're things that I misunderstood and have trouble to adjust to my setup.

I'm not sure how to configure webpack config file based on the above post, and when should it be used in the first place.

Thanks

TOPICS
SDK

Views

2.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 16, 2017 Oct 16, 2017

Copy link to clipboard

Copied

Happy to share the webpack config file that we use for our TypeScript project. Note that we do use both TypeScript and Vue.js. Your configuration file will necessarily be different.

var webpack = require('webpack');

// Based on the basic setup outlined here:

//  https://webpack.js.org/guides/webpack-and-typescript/#basic-setup

module.exports = {

    entry: './dom_html/src/index.ts',

    output: {

        filename: 'bundle.js',

        path: __dirname + '/dist'

    },

    target: "node-webkit",

    // Use 'node' to disable auto-polyfilled node libraries when targeting 'web'.

    // node: {

    //     os: false,

    //     path: false

    // },

    module: {

        rules: [

            {

                test: /\.vue$/,

                loader: 'vue-loader',

                options: {

                    esModule: true

                }

                // See this page for more:

                //  https://vue-loader.vuejs.org/en/configurations/advanced.html

            },

            {

                enforce: 'pre',

                test: /\.js$/,

                loader: "source-map-loader"

            },

            {

                enforce: 'pre',

                test: /\.ts?$/,

                use: "source-map-loader"

            },

            {

                test: /\.ts?$/,

                loader: 'ts-loader',

                exclude: /node_modules/,

                options: {

                    appendTsSuffixTo:[/\.vue$/]

                }

            }

        ]

    },

    resolve: {

        extensions: [".ts", ".js", ".vue"]

    },

    devtool: 'source-map',

    // devtool: 'inline-source-map',    // This breaks in CEP.

    // plugins: [

    //     // From: https://vuejs.org/v2/guide/installation.html#Development-vs-Production-Mode

    //     new webpack.DefinePlugin({

    //         'process.env': {

    //             NODE_ENV: JSON.stringify('production')

    //         }

    //     })

    // ]

};

Some important points about the above:

  1. Line 11: Please note that the target is set to "node-webkit". This provides information about the environment within which the content will run. This setting is specifically for environments like Adobe CEP which rely upon nw.js. See the "Proper Webpack Configuration" section in this post for more.
    1. Lines 12-16: These lines were used prior to discovering the node-webkit target setting. They are unnecessary now, but remain as a hint/reference.
  2. Lines 19-27; anything with "Vue": These are additions specific to the Vue.js framework. Vue-specific content should be removed when using any other setup (React, Angular, Ember, Inferno, VanillaJS, or etc​).
  3. Line 52: In our experience, setting "devtool: 'inline-source-map'" breaks in CEP. Give it a shot, if you like, but we have found that "devtool: 'source-map'" works just fine.

In general you're probably going to want to follow the Angluar-specific instructions first and then make some Adobe CEP-specific modifications to get it running correctly. Very likely these are mostly outlined in bullets #1 and #3 above, though.

Hope this helps!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 17, 2017 Oct 17, 2017

Copy link to clipboard

Copied

Thanks, sberic​ for your reply.

But...I'm still unable to load a simple "Hello world" application in PPRO: tried it with target: 'node-webkit' as you suggested.

I believe that the cause is related to the packaging process combined with external libraries which I use (actually, those are included by VS template ).

Specifically, the zone.js (which used as one of the basic libraries in angular) throws

Uncaught ReferenceError: process is not defined

I'm not sure if that helps for those who use pure js, but perhaps someone have knowledge for Angular framework as well.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 19, 2017 Oct 19, 2017

Copy link to clipboard

Copied

eyali.av  wrote

Specifically, the zone.js (which used as one of the basic libraries in angular) throws

Uncaught ReferenceError: process is not defined

I'm not sure if that helps for those who use pure js, but perhaps someone have knowledge for Angular framework as well.

Just to be sure, you have the --enable-nodejs command set in your manifest, yes? The error you reported seems to show that the io.js "process" global is not defined...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 19, 2017 Oct 19, 2017

Copy link to clipboard

Copied

eyali.av Also, you mentioned that you're using Visual Studio 2017. What version of Premiere Pro are you using?

I just came across a very similar error after testing in Premiere Pro CC 2018. Specifically, I received the following error while debugging:

ReferenceError: process is not defined

vue.runtime.esm.js:339

    at Object.__webpack_exports__.c (/Users/eric/Library/Application Support/Adobe/CEP/extensions/PanelName/dist/bundle.js:413:19)

    at __webpack_require__ (/Users/eric/Library/Application Support/Adobe/CEP/extensions/PanelName/dist/bundle.js:20:31)

    at Object.__webpack_exports__.c (/Users/eric/Library/Application Support/Adobe/CEP/extensions/PanelName/dist/bundle.js:8246:63)

    at __webpack_require__ (/Users/eric/Library/Application Support/Adobe/CEP/extensions/PanelName/dist/bundle.js:20:31)

    at Object.defineProperty.value (/Users/eric/Library/Application Support/Adobe/CEP/extensions/PanelName/dist/bundle.js:66:19)

    at /Users/eric/Library/Application Support/Adobe/CEP/extensions/PanelName/dist/bundle.js:69:11

This issue appears to be related to Vue's configuration. I am not sure why I didn't have this issue before - what specifically changed with the update from CEP 7 to CEP 8 to cause this...?

  • I can get the above to trigger by doing the following:

    1. Open the panel in Premiere Pro CC 2018.
    2. Attach the Visual Studio Code Debugger to the panel.
    3. Press the "Restart" button on the VS Code Debugger button panel.

    It is important to note that the error does not appear when I run unattached. I don't understand why that is yet.

    I was able to sidestep this by making sure that process actually is defined for the panel. To do this, I simply added the mixed-context flag to the manifest:

    <Parameter>--mixed-context</Parameter>

    This seems to fix the issue as it injects the NodeJS process global into the browser context.

    Alternatively, it seems that you should be able to use Webpack's DefinePlugin feature to workaround the issue. By adding the following to our Webpack configuration, we were able to get past the issue:

    plugins: [

        // From: https://vuejs.org/v2/guide/installation.html#Development-vs-Production-Mode

        new webpack.DefinePlugin({

            'process.env': {

                // NODE_ENV: JSON.stringify('production')

                NODE_ENV: JSON.stringify('development')

            }

        })

    ]

    However, we later ran into another issue in that "require" is now broken(??). The best approach, therefore, seems to be to enable the mixed-context.

    Have you attempted to run with the --mixed-context flag set yet?

  • I'm starting to feel that there was a change between nw.js 0.12.1 (CEP 6.1 and 7) and nw.js 0.21.5 (CEP 8). It seems to be in the application bootstrapping where issues occur. I assume that attaching a debugger fiddles with the configuration in our case and breaks things. That said, given that setting the --mixed-context flag seems to enable everything to work (debugger restart functionality included), we'll just enable that in our manifest along with an XML comment as to the reasoning.

    Votes

    Translate

    Translate

    Report

    Report
    Community guidelines
    Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
    community guidelines
    Explorer ,
    Oct 23, 2017 Oct 23, 2017

    Copy link to clipboard

    Copied

    LATEST

    Hi,

    Some answers (and a new approach that I'd like to share that works for me):

    Just to be sure, you have the --enable-nodejs command set in your manifest, yes?

    yes...

    What version of Premiere Pro are you using?

    2017.1.2

    Have you attempted to run with the --mixed-context flag set yet?

    yes, with no luck unfortunately.

    Just something to note: I don't use VS debugger, I couldn't make the javascript loading in PPRO.

    I'm sure gonna use it (I didn't know it's an option yet....).

    The good news is, I managed to load successfully an Angular 4 app built with this template.

    So, I think my conclusion from this small journey is: something went wrong with my previous bundling and/or AOT and/or other configuration which I'm not familiar with.

    Votes

    Translate

    Translate

    Report

    Report
    Community guidelines
    Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
    community guidelines