[英]Webpack - Typescript - Babel Loader not transpiling JSON import
Setting up a new webpack build for my local setup to use across the system.为我的本地设置设置一个新的 webpack 构建以在整个系统中使用。 Aka building my webpack setup as a private node package as all my work is literally the same so building it as a global package.也就是将我的 webpack 设置构建为私有节点包,因为我的所有工作实际上都是相同的,因此将其构建为全局包。 Similar to the concept of laravel mix
.类似于laravel mix
的概念。
Anyway, I've gotten the webpack setup transpiling the Typescript correctly, that all looks good & works as expected when called in a browser.无论如何,我已经让 webpack 设置正确地转换了 Typescript,在浏览器中调用时,一切看起来都很好并且按预期工作。 However, I run into an issue when I import a .json
file into a TS file using import * as json from 'somewhere-over-the-rainbow.json
;但是,我遇到一个问题,当我导入.json
使用文件转换成TS文件import * as json from 'somewhere-over-the-rainbow.json
;
Transpiled Code转译的代码
(()=>{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()})()})();
As you can see, this results in 2 "lines" being for(const t in e)o[t]=()=>e[t];
如您所见,这导致 2 个“行”是for(const t in e)o[t]=()=>e[t];
and const u=["Example"];
和const u=["Example"];
if I remove the .json
import, the code transpiles as expected如果我删除.json
进口,代码transpiles预期
(()=>{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()})()})();
I've tweaked with the Babel Preset options endlessly, the only option that seemed to transpile my testing code without const
was setting module
to commonjs
which felt dodgy so that's been reverted (be good to know if this is fine).我无休止地调整了 Babel Preset 选项,似乎可以在没有const
情况下转译我的测试代码的唯一选项是将module
设置为commonjs
,这感觉很狡猾,因此已恢复(很高兴知道这是否commonjs
)。
Does anyone have any insight into this?有没有人对此有任何见解? My perception is that the Babel Loader is actually doing it's job but the JSON is being "loaded" in after Babel has transpiled TS > ES which is causing the issue of ES6 code being present in ES5 code.我的看法是 Babel Loader 实际上正在完成它的工作,但是在 Babel 转译 TS > ES 之后,JSON 正在“加载”,这导致 ES6 代码出现在 ES5 代码中。
Webpack Rules & TS Config below 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"
}
}
Note: I've processed the output of Transpiled Code
above through Babel's online transpiler (using es2015 preset) and the output is as expected, aka all const change to var
.注意:我已经通过 Babel 的在线转换器(使用 es2015 预设)处理了上面Transpiled Code
的输出,并且输出符合预期,也就是所有 const 更改为var
。
Thanks for any help :)谢谢你的帮助 :)
你可以试试这个:
const json = require('path-to-file.json');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.