Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support ts? #2

Open
oui-a11y opened this issue Jul 3, 2023 · 5 comments
Open

support ts? #2

oui-a11y opened this issue Jul 3, 2023 · 5 comments

Comments

@oui-a11y
Copy link

oui-a11y commented Jul 3, 2023

input main.ts , do not work

@XiaoLin1995
Copy link
Owner

webpak

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          // ...
          {
            loader: 'import-meta-loader',
          }
        ]
      }
    ]
  }
}

vue cli

// vue.config.js
const importMetaLoader = require('import-meta-loader')
const path = require('path')

module.exports = {
  // ...
  chainWebpack: (config) => {
    config.module.rule('ts')
      .test(/\.ts$/)
      .exclude.add(path.resolve('node_modules'))
      .end()
      .use(importMetaLoader)
      .loader('import-meta-loader')
      .options({
        alias: Object.fromEntries(config.resolve.alias.store)
      })
      .end()
  }
}

@oui-a11y
Copy link
Author

oui-a11y commented Jul 3, 2023

is error, you can test
image

@oui-a11y
Copy link
Author

oui-a11y commented Jul 3, 2023

this project is vue cli ts demo,you can test

@XiaoLin1995
Copy link
Owner

vue cli version: 5.0.8

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const importMetaLoader = require('import-meta-loader')
const path = require('path')

function setTSLoader (config, { use, loader, options }) {
  const tsRule = config.module.rule('ts')
  const tsLoader = tsRule.uses.store.get('ts-loader')
  const tsOtherLoaders = new Map()
  tsRule.uses.store.forEach((val, key) => {
    if (key === 'ts-loader') return
    tsOtherLoaders.set(key, val)
  })
  tsRule.uses.clear()
  tsOtherLoaders.forEach((val, key) => {
    tsRule.uses.store.set(key, val)
  })

  tsRule.test(/\.ts$/)
    .exclude.add(path.resolve('node_modules'))
    .end()
    .use(use)
    .loader(loader)
    .options(options)
    .end()
  
  tsRule.uses.store.set('ts-loader', tsLoader)
}

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    setTSLoader(
      config,
      {
        use: importMetaLoader,
        loader: 'import-meta-loader',
        options: Object.fromEntries(config.resolve.alias.store)
      }
    )
  }
})

@oui-a11y
Copy link
Author

oui-a11y commented Jul 4, 2023

Can you take a look at the sample code of the vue cli ts version. self test is error. format path may have problem.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants