是否可以从 node_module 转换本地模块？答案

【问题标题】：Is it possible to transpile local modules from node_module?是否可以从 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 中）。谢谢
太棒了，您也愿意发布答案吗？万一其他人有同样的问题？ :)

标签： typescript webpack ecmascript-6 babeljs karma-webpack

【解决方案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 代码。

【讨论】：