【typescript】配置ts-import-plugin按需加载antd导致Inline JavaScript报错解决方案(非网上常见2种)

场景复现

  • 为了按需引入,于是我引用了ts-import-plugin,当时这么配置的:
  {
    test: /\.(j|t)sx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
          transpileOnly: true,
          getCustomTransformers: () => ({
              before: [ tsImportPluginFactory( [{
                  libraryName:'antd',
                  libraryDirectory:'lib',
                  style:true
              }]) ]
          }),
          compilerOptions: {
              module: 'es2015'
          }
      },
  },
  • 然后打包就会报错,提示Inline JavaScript is not enabled. Is it set in your options?

解决方法

  • 网上通常有2种解决办法,一种是下低版本的less,一种是在less的配置上加上:
 options:{
    javascriptEnabled:true
 }
  • 我试了下都是可以的。但是我就产生了疑问,没用按需加载时并没有开启js,为什么用了就要开启?
  • 我去less-loader文档上看到这样一句:
Enable Inline JavaScript (Deprecated)
False by default starting in v3.0.0. Enables evaluation of JavaScript inline in .less files. This created a security problem for some developers who didn't expect user input for style sheets to have executable code.
Replaced with the @plugin option.
  • 说明这方式会引起安全问题,也不推荐打开这选项。这就让我感觉有点意思了。
  • 我看了下我其中一个组件的报错是这么写的:
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in 
      .....
  • 然后我看了一下我那个组件,就单单引入了一个图标。我就想,我这个图标就这么巧用上了贝塞尔曲线?
  • 我就想起配ts-import-plugin时,有个选项是自动引入样式,可以做为false处理。
  • 我将选项作为false之后果然没报错了,并且样式并没有不存在。图标仍好好的出现在页面上,目前我使用的其他样式也都正常。所以其实没必要打开js开关。
   options: {
     transpileOnly: true,
         getCustomTransformers: () => ({
             before: [ tsImportPluginFactory( [{
                 libraryName:'antd',
                 libraryDirectory:'lib',
                 style:false
             }]) ]
         }),
         compilerOptions: {
             module: 'es2015'
         }
     },
  • 并且,我拿项目试验了一下,打开js并且style配置为true,打包后代码4620k,如果配置false,并且关闭js,打包后代码4474k。
  • 你有可能真的不需要那200k代码。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
vue-typescript-import-dts 是一个用于为 Vue.js 项目中的 TypeScript 文件生成类型声明文件的工具。在 Vue.js 项目中使用 TypeScript 进行开发时,我们经常要为一些第三方库或自定义组件编写类型声明文件,以提供更好的代码提示和类型检查。 使用 vue-typescript-import-dts 工具可以自动分析 TypeScript 文件中的导入语句,并根据导入的模块生成对应的类型声明文件。这样,在使用该模块时,IDE 或编辑器就能提供准确的代码补全和类型检查。 例如,假设我们的项目中使用了一个名为 axios 的第三方库进行网络请求,但是该库并没有提供类型声明文件。我们可以通过 vue-typescript-import-dts 工具,在我们的 TypeScript 文件中导入 axios,并正确配置工具,它将自动为我们生成一个 axios.d.ts 类型声明文件。 具体使用 vue-typescript-import-dts 的步骤如下: 1. 在项目中安装 vue-typescript-import-dts,可以使用 npm 或 yarn 命令来安装。 2. 在 TypeScript 文件中,使用 import 语句导入要生成类型声明文件的模块。 3. 在项目根目录下创建一个 .vue-typescript-import-dts.json 配置文件,用来配置生成类型声明文件的规则。可以指定生成的声明文件的输出路径、文件名等。 4. 运行 vue-typescript-import-dts 命令,它会自动扫描 TypeScript 文件中的导入语句,并根据配置生成相应的类型声明文件。 这样,在我们编写代码时,IDE 或编辑器就可以准确地为我们提供代码补全和类型检查的功能。这对于提高开发效率和代码质量常有帮助。 总之,vue-typescript-import-dts 是一个便捷的工具,可以自动为 Vue.js 项目中使用的第三方库或自定义组件生成类型声明文件,提供更好的代码提示和类型检查功能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

业火之理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值