有条件地导入 npm 模块？答案

【问题标题】：Conditionally importing npm modules?有条件地导入 npm 模块？
【发布时间】：2017-04-26 08:43:26
【问题描述】：

我的项目结构如下：

- workspace
  - customPackage
    - customIndex.js
  - myProject
    - index.js
  - myProject2
    - index.js

在开发中，我想从本地工作区导入包，如下所示：

//index.js
import something from '../customePackage/customIndex.js'

在生产中，我需要从 npm 模块进行导入，如下所示：

//index.js
import something from 'customPackage';

目的是能够使用包中的本地更改（无需经过提交周期）。最终通过npm包测试，包可以正常推送使用了。

如何有效地做到这一点，而不必每次都更改代码？

【问题讨论】：

标签： javascript reactjs npm webpack ecmascript-6

【解决方案1】：

你可以在 Webpack 中使用Resolve#alias：

resolve: {
    alias: {
        "customPackage": process.env.NODE_ENV === "production" ? 
            "customPackage" :
            path.resolve(__dirname, "../customePackage/customIndex.js")
    }
}

那么在你的源码中，你只需要做：

import something from 'customPackage';

它会指向正确的包。显然，您需要设置 NODE_ENV 环境变量，或者根据您的构建环境进行更改。

【讨论】：

感谢您的回复。但它给了我以下错误：模块构建失败：错误：解析错误：第 1 行：非法导入声明。可能是因为我试图访问项目目录之外的文件（定义了 .babelrc），因此 babel 加载器无法正确加载。
是的，我正在使用 eslint。我的 eslint.rc 中确实有 "ecmaFeatures": { "jsx": true, "modules": true }。还是行不通。另外我不确定为什么 eslint 会阻止 babel-loader 从项目目录之外加载。
@SahilSharma 听起来确实像通天塔问题。你需要弄清楚如何让 Webpack 对那些不在你的项目范围内的文件运行 babel
是的，这是我问题的第二部分。我想我会为此发布一个单独的问题。感谢您的帮助。

【解决方案2】：

如果你已经在使用 webpack，你可以创建两个不同的入口点：

entry: {
    bundle: './Scripts/index.tsx',
    bundle2: './Scripts/index2.tsx'
},
output: {
    publicPath: "/js/",
    path: path.join(__dirname, '/wwwroot/js/'),
    filename: '[name].js'
},

然后在index 中导入主模块，在index2 中导入测试模块。因此，您将拥有不同的捆绑文件 bundle.js 和 bundle2.js。

【讨论】：