如何使用“npm link”链接 babel 转译模块答案

【问题标题】：How to make babel transpile modules linked using "npm link"如何使用“npm link”链接 babel 转译模块
【发布时间】：2018-04-26 03:54:58
【问题描述】：

我当前的项目（我的项目）中有很多代码需要在新项目中使用。这段代码是用 ES6 编写的，然后用 babel 转译。

我用这个共享代码创建了一个名为“my-module”的模块，并使用npm link将它链接到“my-project”

问题是当我启动项目时，“my-module”中的代码没有被转译，并在导入语句处引发错误。

my-module 中的代码将被大量编辑。如何让它发挥作用？

package.json

  "scripts": {
    "start": "nodemon bin/dev",
    "clean": "rm -rf dist",
    "build": "yarn run clean && mkdir dist && babel src -s -d dist",
    "production": "yarn run build && node bin/production"
  },

.babelrc

{
  "presets": ["es2015", "stage-2"]
}

【问题讨论】：

你找到解决这个问题的方法了吗？

标签： node.js babeljs babel-polyfill babel-loader babel-register

【解决方案1】：

链接的项目将找不到您的 .babelrc 文件。您有几个选择：

将.babelrc 放在my-project 或更高级别的目录中。这将需要在该模块中（或全局）安装 babel 插件
如果您使用的是构建工具（即 webpack、browserify 等），您可以在此处声明 babel 配置。

这条评论帮助了我：https://github.com/babel/gulp-babel/issues/93#issuecomment-249172581

我的项目使用 browserify，因此在构建脚本中声明与 .babelrc 相同的插件并调用 require.resolve 会导致 npm 链接项目被正确转译。

return browserify.transform('babelify', {
    sourceMaps: true, 
    global:true, 
    plugins: ['babel-preset-es2015'].map(require.resolve)
})

【讨论】：