如何轉換es5需要es6導入

我使用webpack和svg-url-loader將SVG文件加載到我的反應應用程序中。但重要的是我想將這個ES5需求轉換成ES6導入。這裏是要求：如何轉換es5需要es6導入

require('!!svg-url-loader?noquotes!../images/mustachio.svg')

，我想出了這個import語句：

import mustachio from '!!svg-url-loader?noquotes!../images/mustachio.svg'

但是是不是有一個更清潔的方式做到這一點？

來源

2017-04-25 Hum4n01d

你這是什麼意思清潔？沒有比'xyz「'導入abc更乾淨的導入。模塊字符串的格式取決於您的模塊加載器，而不是es6導入。 –

'mustachio'從哪裏來？ ES5需求中沒有可變因素。 – Bergi

這是它的工作原理。無論如何，我明白了。 – Hum4n01d

你應該使用默認的WebPack需要與

require('!!svg-url-loader?noquotes!../images/mustachio.svg')

，或者你應該添加SVG-URL裝載機到您的WebPack配置;

module.exports = { 
 
    module: { 
 
     rules: [{ 
 
      test: /\.svg/, 
 
      use: { loader: 'svg-url-loader', options: {noquotes: true}} 
 
     }] 
 
    } 
 
}

，現在你可以使用

import mustachio from './../images/mustachio.svg';

來源

2017-04-25 20:26:52

謝謝！我以前就是這樣做的，但它不工作，因爲我沒有使用'noquotes'選項。我應該刪除我的問題嗎？ – Hum4n01d

Webpack加載器可能是你想要的。如果不是別名也可能有幫助。

https://webpack.js.org/loaders/

https://webpack.js.org/configuration/resolve/

例如：在你的WebPack配置加載器的配置可以是這樣的......

loaders: [ 
 
     { test: /\.css$/, loader: 'style-loader!css-loader'}, 
 
     { test: /\.less$/, loader: 'style-loader!css!less' }, 
 
     { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=css/[name].[ext]' }, 
 
     { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=css/[name].[ext]' }, 
 
     { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=css/[name].[ext]' }, 
 
     { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=css/[name].[ext]' }, 
 
     { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=css/[name].[ext]' }, 
 
     { 
 
     test: /.jsx?$/, 
 
     loader: 'babel-loader', 
 
     exclude: /node_modules/, 
 
     query: 
 
     { 
 
      presets: ['es2015', 'react', 'stage-0'], 
 
      plugins: ['transform-runtime', 'transform-decorators-legacy'] 
 
     } 
 
     } 
 
    ]

這樣就不必指定每個加載器都需要或導入。

來源

2017-04-25 20:22:39 Kosch

如何轉換es5需要es6導入

回答

相關問題