typescript (.ts) entry point support about webextension-toolbox

[bboydflo]

I have noticed that my .ts files get copied over dist folder so I changed my webextension-toolbox-config.js a bit. I also had to add support for tslint so I added some more config like below. I hope it helps someone.

const { resolve } = require('path')
const GlobEntriesPlugin = require('webpack-watched-glob-entries-plugin')

module.exports = {
  webpack: (config, { dev, vendor }) => {
    // Add typescript loader. supports .ts and .tsx files as entry points
    config.resolve.extensions.push('.ts')
    config.resolve.extensions.push('.tsx')
    config.entry = GlobEntriesPlugin.getEntries(
      [
        resolve('app', '*.{js,mjs,jsx,ts,tsx}'),
        resolve('app', '?(scripts)/*.{js,mjs,jsx,ts,tsx}')
      ]
    )
    /* // add tslint support
    config.module.rules.push({
      test: /\.tsx?$/,
      enforce: 'pre',
      use: [{
        loader: 'tslint-loader',
        options: {
          tsConfigFile: 'tsconfig.json',
          emitErrors: true
        }
      }]
    }) */

    config.module.rules.push({
      test: /\.tsx?$/,
      loader: 'ts-loader'
    })

    // Important: return the modified config
    return config
  },
  copyIgnore: [ '**/*.js', '**/*.json', '**/*.ts', '**/*.tsx' ]
}

To add support for tslint using tslint-loader install tslint-loader as a dev dependency (npm i -D tslint-loader and uncomment tslint-loader lines from above

[bboydflo]

@balcsida Something like this should work: I have removed some parts from my original code.

inside webextension-toolbox-config.js

const { resolve } = require('path')
const GlobEntriesPlugin = require('webpack-watched-glob-entries-plugin')

module.exports = {
  webpack: (config, { dev, vendor }) => {
    // Add typescript loader. supports .ts and .tsx files as entry points
    config.resolve.extensions.push('.ts')
    config.resolve.extensions.push('.tsx')
    config.entry = GlobEntriesPlugin.getEntries(
      [
        resolve('app', '*.{js,mjs,jsx,ts,tsx}'),
        resolve('app', '?(scripts)/*.{js,mjs,jsx,ts,tsx}')
      ]
    )
    config.module.rules.push({
      test: /\.tsx?$/,
      loader: 'ts-loader'
    })

    // Important: return the modified config
    return config
  }
}

should make it possible to add an entry point like main.ts file inside ./app or ./app/scripts

[balcsida]

Thanks for your quick reply!
I will add this to the documentation and keep this ticket opened until.

[balcsida]

Raised priority to major. I will document this as soon as possible.

[bboydflo]

I fixed this by overwriting config.entry. I've got some inspiration from the actual source code. I am not sure that this lib should support typescript out of the box, mainly because there are multiple typescript loaders one could use.

Closing for now

[balcsida]

Hi @bboydflo,

Could you please share the code and configuration you have used?
This should be a useful Readme/Wiki entry for others.

If it is not a problem, I reopened this issue and added the "documentation" label to it.

Kind regards,
balcsida

[thuy-le-ep]

Is there any way to exclude a folder when compile? E.g. I have 3rd libraries in folder "notCompileScripts" and I want keep them not compile.

Expected Behavior

A 3rd file e.g. jquery.js (found in ./app/notCompileScripts/jquery.js) should be keep in ./dist/chrome/notCompileScripts/jquery.js

Current Behavior

All .js file in notCompileScripts will be ignored as entry file .

Steps to Reproduce

Add custom webextension-toolbox-config.js file

const {
    resolve
} = require('path')
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    webpack: (config, {
        src,
        target,
        dev,
        vendor
    }) => {
        var target = resolve(target.replace('[vendor]', vendor))
        config.plugins.push(new CopyPlugin([{
            context: resolve(src),
            from: resolve(src, './notCompileScripts/**'),
            to: target
        }]));

        // Important: return the modified config
        return config
    }
}

It works OK when run dev but when I run build it not work. Seem it was zipped before copy

√ success webpack compiled in 6s 291ms
Time: 6301ms
Built at: 09/24/2018 4:49:45 PM
                                                Asset       Size  Chunks             Chunk Names
                             icons/star-filled-38.png   1.19 KiB          [emitted]
                                        background.js   89.5 KiB       0  [emitted]  background
                             icons/[email protected]   3.09 KiB          [emitted]
                                        icons/LICENSE  194 bytes          [emitted]
                              icons/star-empty-19.png  556 bytes          [emitted]
                                icons/bookmark-it.png   1.41 KiB          [emitted]
                              icons/star-empty-38.png  959 bytes          [emitted]
                                    content-script.js   89.3 KiB       1  [emitted]  content-script
                             icons/star-filled-19.png  753 bytes          [emitted]
                                        manifest.json  916 bytes          [emitted]
..\..\packages\extension-vs-webpage.v0.0.1.chrome.zip   70.4 KiB          [emitted]
                 notCompileScripts/libs/jquery.min.js   8.07 KiB          [emitted]

Is there any way? Or can I edit copyIgnore variable to make it work with minimum efforts. Thank you!

Your Environment

Tech	Version
webextension-toolbox	2.0
node	v10.10.0
OS	Window 10
browser
etc

[bboydflo]

@thuy-le-ep I have added some sample code above on how to register/overwrite entry points. In my case I needed to overwrite entry points to support .ts and .tsx files. in your case I think something like this should work:

const { resolve } = require('path')
const GlobEntriesPlugin = require('webpack-watched-glob-entries-plugin')

module.exports = {
  webpack: (config, { dev, vendor }) => {
    config.entry = GlobEntriesPlugin.getEntries(
      [
        resolve('app', '*.{js,mjs,jsx}'),
        resolve('app', '?(scripts)/*.{js,mjs,jsx}')
      ],
      {
          ignore: 'notCompileScripts/*.js'
      }
    )
    // Important: return the modified config
    return config
  }
}

this is based on docs from: https://github.com/Milanzor/webpack-watched-glob-entries-plugin that is used internally

[thuy-le-ep]

@bboydflo thank you. But it not work. I think webpack-watched-glob-entries-plugin to restart the compiler in watch mode, when new files got added or changed.

[bboydflo]

@thuy-le-ep do you have any repo to reproduce this?

[thuy-le-ep]

@bboydflo update
copyIgnore: ['**/!(notCompileScripts)/*.js','**/*.json']
can work with case
notCompileScripts\keepScript.js -> dist\notCompileScripts\keepScript.js
but not work with case
notCompileScripts\some-dir\keepScript.js

Do you have any idea? Thank you

[bboydflo]

maybe something like this?

copyIgnore: ['**/!(notCompileScripts)/**/*.js','**/*.json']

[thuy-le-ep]

@bboydflo I was tried this but the result same as '**/!(notCompileScripts)/*.js'

[bboydflo]

@thuy-le-ep can you share the whole webextension-toolbox-config.js ?

[thuy-le-ep]

@bboydflo app structure

app
    -- icons
    -- lib
    -- notCompileScripts
        -- some-dir
            -- keep-js-file.js
        -- keep-js-file-2.js
    -- background.js
    -- content.js
    -- manifest.json
webextension-toolbox-config.js

and webextension-toolbox-config.js

module.exports = {
    webpack: (config, {
        dev,
        vendor
    }) => {
        // Important: return the modified config
        return config
    },
    copyIgnore: ['**/!(notCompileScripts)/**/*.js','**/*.json']
}

When dev or build, only the file in folder notCompileScripts will to keep without file in sub-folder.

-- notCompileScripts                            -- notCompileScripts 
   -- some-dir                                     -- ignored 
      -- keep-js-file.js          ===>                -- ignored 
   -- keep-js-file-2.js                            -- keep-js-file-2.js   

But I want keep all files and files in all sub-folders.

[bboydflo]

so I revisited your original question

Is there any way to exclude a folder when compile?

and I think it's still possible since you have access to the original config options you still can tweak them as you wish. I think maybe what you need is this: https://webpack.js.org/configuration/module/#module-noparse maybe something like this:

module.exports = {
    webpack: (config, {
        dev,
        vendor
    }) => {
        config.module.noParse = /notCompileScripts\/some-dir/
        // Important: return the modified config
        return config
    }
}

try this and see if it works. maybe you also need to tweak the copy-webpack-plugin config. good luck!

[thuy-le-ep]

@bboydflo ok thank you 👍

[yamadashy]

In webextension-toolbox v4, copyIgnore has breaking changed on copy-webpack-plugin >= v6.
https://github.com/webpack-contrib/copy-webpack-plugin/blob/797a006521521603d5cdf34b1041a59ade07dd25/CHANGELOG.md#600-2020-05-15

I changed copyIgnore in this comment's code, it worked using path.resolve.
#93 (comment)

- copyIgnore: [ '**/*.js', '**/*.json', '**/*.ts', '**/*.tsx' ]
+ copyIgnore: [ resolve('**/*.{js,json,ts,tsx}') ]