【typescript】ts-inmport-plugnを設定し、必要に応じてantdをロードして、Inline JavaScriptが間違った解決策を報告する(オンラインでは一般的ではない2種類)

6628 ワード

シーンを再現する
  • 必要に応じて導入するために、ts-mport-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-mport-pluginを作る時に、自動的にスタイルを導入するオプションがあります.falseとして処理できます.
  • オプションをfalseとして使った後、やはりエラーが発生していません.そして、スタイルは存在しません.アイコンはまだちゃんとページに表示されています.現在使っている他のスタイルも正常です.だから、jsスイッチを入れる必要はないです.
  •    options: {
         
         transpileOnly: true,
             getCustomTransformers: () => ({
         
                 before: [ tsImportPluginFactory( [{
         
                     libraryName:'antd',
                     libraryDirectory:'lib',
                     style:false
                 }]) ]
             }),
             compilerOptions: {
         
                 module: 'es2015'
             }
         },
    
  • そして、プロジェクトを持ってテストしました.jsを開けて、styleはtrueに設定されています.梱包後のコード4620 kはfalseを配置し、jsをオフにしたら、コード4474 kを包装します.
  • 本当に200 kコードが必要ではないかもしれません.