Webpack - Typescript - Babel Loader 不转译 JSON 导入

Question

为我的本地设置设置一个新的 webpack 构建以在整个系统中使用。 Aka 将我的 webpack 设置构建为私有节点包，因为我的所有工作实际上都是相同的，因此将其构建为全局包。类似于laravel mix的概念。

无论如何，我已经获得了正确转换 Typescript 的 webpack 设置，在浏览器中调用时，一切看起来都很好并且按预期工作。但是，当我使用 import * as json from 'somewhere-over-the-rainbow.json 将 .json 文件导入 TS 文件时遇到问题；

转译代码

(()=>{var e={27:e=>{e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},963:e=>{function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}},536:e=>{e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}}},t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);n.r(r);var o={};if(2&t&&"object"==typeof e&&e)for(const t in e)o[t]=()=>e[t];return o.default=()=>e,n.d(r,o),r},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";var e=n(27),t=n.n(e),r=n(963),o=n.n(r),i=n(536),a=n.n(i);const u=["Example"];var l=n.t(u,2);(function(){function e(){t()(this,e),a()(this,"components",void 0),this.components=l}return o()(e,[{key:"init",value:function(){this.attachComponents()}},{key:"attachComponents",value:function(){}}],[{key:"build",value:function(){console.log("TEST"),(new e).init()}}]),e})().build()})()})();

如您所见，这导致 2“行”分别为 for(const t in e)o[t]=()=>e[t]; 和 const u=["Example"];

如果我删除 .json 导入，代码会按预期进行转译

(()=>{var e={27:e=>{e.exports=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}},963:e=>{function n(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}},n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{}};return e[r](o,o.exports,t),o.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{"use strict";var e=t(27),n=t.n(e),r=t(963),o=t.n(r);(function(){function e(){n()(this,e)}return o()(e,[{key:"init",value:function(){this.attachComponents()}},{key:"attachComponents",value:function(){}}],[{key:"build",value:function(){console.log("TEST"),(new e).init()}}]),e})().build()})()})();

我已经无休止地调整了 Babel Preset 选项，唯一似乎没有 const 将module 设置为commonjs 的选项似乎很狡猾，所以这一直是已恢复（很高兴知道这是否可以）。

有人对此有任何见解吗？我的看法是 Babel 加载器实际上正在完成它的工作，但是在 Babel 转译 TS > ES 之后 JSON 被“加载”，这导致 ES6 代码出现在 ES5 代码中的问题。

下面的 Webpack 规则和 TS 配置

            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-proposal-class-properties',
                                    '@babel/plugin-proposal-object-rest-spread',
                                    '@babel/plugin-transform-runtime'
                                ],
                                presets: [
                                    '@babel/react', 
                                    '@babel/preset-typescript',
                                    [
                                        '@babel/preset-env',
                                        {
                                            targets: [
                                                '>0.25%'
                                            ]
                                        }
                                    ]
                                ]
                            }
                        },
                        exclude: /node_modules/
                    },
                    {
                        test: /\.s[ac]ss/i,
                        use: [
                            miniCssExtract.loader,
                            'css-loader',
                            'sass-loader'
                        ]
                    }
                ]
            }

tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "./src",
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "jsx": "react",
        "module": "esnext",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "removeComments": true,
        "resolveJsonModule": true,
        "outDir": "dist",
        "strict": true,
        "target": "es5"
    }
  }

注意：我已经通过 Babel 的在线编译器（使用 es2015 预设）处理了上面 Transpiled Code 的输出，并且输出与预期一致，也就是所有 const 更改为 var。

感谢您的帮助:)

Answer 1

你可以试试这个：

const json = require('path-to-file.json');