时间戳

首页 > 解决方案 > 防止 babel 尝试将资源转换为 javascript 模块

javascript - 防止 babel 尝试将资源转换为 javascript 模块

问题描述

如何防止 babel 尝试在 es2016 项目中转换资源（svg、css、...）？

例如这个简单的项目：

src/app.js：

import logo from './logo.svg';

const Obj = { name: 'obj' };
export default Obj;

src/logo.svg：常规 SVG 可缩放矢量图形图像

包.json： 

 "name": "test-babel",  
  "version": "1.0.0",  
  "description": "Please babel do not try converting svg files to js",  
  "scripts": {  
    "dev": "cross-env NODE_ENV=development babel-watch --presets es2015 src/app.js"  
  },  
...

没有 .babelrc 文件，没有 webpack/没有捆绑

编译导致以下错误：

$ npm run dev

> test-import@1.0.0 dev /home/user/workspace/babel
> cross-env NODE_ENV=development babel-watch --presets es2015 src/app.js

/home/user/workspace/babel/src/logo.svg:1
(function (exports, require, module, __filename, __dirname) { <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Module._extensions..js (module.js:663:10)
    at babelWatchLoader (/home/user/workspace/babel/node_modules/babel-watch/runner.js:53:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/user/workspace/babel/node_modules/babel-watch/runner.js:62:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

标签： javascriptecmascript-6babeljstranspiler

解决方案

找到这个插件： https
://www.npmjs.com/package/babel-plugin-inline-import 导入的资源在编译时内联，如果它们的扩展名在 .babelrc 中声明： 

{
  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [
        ".css",
        ".svg"
      ]
    }]
  ]
}

这解决了我的问题。

推荐阅读