代码之家 › 专栏 › 技术社区 › coinhndp

由于@babel/preset typescript,树形网页4不适用

tree-shaking webpack-4 babel

1

coinhndp · 技术社区 · 7 年前

我在react项目中使用了typescript和babel 7(我删除了tsloader,因为babel 7现在支持TS)

"@babel/preset-typescript": "^7.1.0",

问题是当我使用这个预设时,爬树不起作用。我的宝贝

{
  "presets": [
    ["@babel/preset-env", {"modules": false}],
    "@babel/preset-react",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "react-hot-loader/babel"
  ]
}

有人知道怎么修吗?为什么?非常感谢你

1 回复 | 直到 7 年前

1

Maciej 7 年前

我的配置可以使用,你能试试这些吗:

tsconfig。json:

{
"compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "pretty": true,
    "noEmit": true,
    "strict": true,
    "isolatedModules": true,
    "esModuleInterop": true
},
"include": ["./src/**/*"]

}

babelrc先生

{
"presets": [
    "@babel/react",
    "@babel/typescript",
    [
        "@babel/env",
        { 
            "modules": false,
            "targets": { "browsers": "last 2 versions" }
        }
    ]
],
"plugins": [
    [
        "babel-plugin-styled-components", 
        {
            "pure": true
        }
    ],
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
]

}

还有网页包。配置。js:

rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    }
                ]
            },
        ],

有了这个配置,我就可以对正常的死代码和样式化组件进行树震动(注意插件设置,这有点画龙点睛!)

环境:

node 8.10
"webpack": "^4.28.4",
"typescript": "^3.3.3",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",