是否可以从 node_module 转换本地模块?

Posted

技术标签:

【中文标题】是否可以从 node_module 转换本地模块?【英文标题】:Is it possible to transpile local modules from node_module? 【发布时间】:2017-06-09 20:00:42 【问题描述】:

我有 2 个包含几个类的打字稿项目。我在 package.json 的 Project2 中添加了 Project1 的依赖项


  "name": "Project2",
  "dependencies": 
    "@Project1": "file:../Project1/dist"
  

这两个项目都是使用构建的

“目标”:“es5”,“模块”:“es2015”,

我正在使用Karma-Webpack 为项目设置测试环境。为了转译我使用 babel-loader(预设:es2015)而不是 ts-loader 的代码。它转译来自 Project2 的代码,但来自位于 node_modules 中的 Project1 的代码没有被转译。由于它在运行测试时会引发以下错误

Chrome 55.0.2883 (Windows 10 0.0.0) 错误未捕获语法错误: spec.bundle.js:80972 处的意外令牌导出

我想知道是否可以使用 webpack 从 node_modules 转换本地模块?

注意:如果我将模块类型更改为“commonjs”,它可以工作,但这不是我正在寻找的解决方案。

有什么建议吗???

【问题讨论】:

node_modules 中的代码应该已经被转译了。 好的。有没有办法使用任何业力预处理器对其进行预处理?和其他代码类似吗? 好吧.. 如果您使用 gulp 或 grunt,您可以构建项目。但这将是一种非常混乱的处理方式。 得到了解决方案,您可以配置 webpack 使用 babel-loader 转译本地依赖模块(放置在 node_module 中)。谢谢 太棒了,您也愿意发布答案吗?万一其他人有同样的问题? :) 【参考方案1】:

嗯,我遇到了这个错误,因为我使用 es2015 编译父模块。如果你使用commonjs,你不会遇到这个问题。

您可以通过在 karma.config.file 的 webpack 配置中添加以下内容来转换节点模块代码。

webpack: 
            resolve: 
                extensions: ['', '.ts', '.js']
            ,

            module: 
                loaders: [
                    
                        // This will transpile Typescript files
                        test: /\.ts(x?)$/,
                        exclude: /node_modules/,
                        loader: "babel-loader" + "?presets[]=es2015" + "!ts-loader",
                    ,
                    
                        // This will transpile ES2015 javascript files
                        test: /\.js(x?)$/,
                        include: [
                            path.resolve(__dirname, "node_modules/<<YOUR MODULE NAME>>")
                        ],
                        loader: "babel-loader" + "?presets[]=es2015"
                    
                ]
            
        ,

现在,Webpack 将使用 babel-loader 转换 JS/TS 代码。

【讨论】:

以上是关于是否可以从 node_module 转换本地模块?的主要内容,如果未能解决你的问题,请参考以下文章

如何为本地引用的节点模块指定 node_modules 文件夹

未找到转换选项中的模块 <rootDir>/node_modules/jest-preset-angular/preprocessor.js

打字稿模块分辨率

如何使用 babel-loader 转换 node_modules 模块?

未找到转换选项中的模块 <rootDir>/node_modules/vue-jest

本地 NPM 模块未正确安装