如何使使用"npm link"链接的babel可移植模块链接到服务器. [英] How to make babel transpile modules linked using "npm link"

问题描述

我当前的项目(my-project)中有很多代码，新代码将需要这些代码.该代码已用ES6编写，并与babel一起进行了转译.

I have a lot of code in my currently project(my-project) that will be needed in a new one. This code has been written in ES6 and transpiled after with babel.

我已经使用此共享代码创建了一个名为"my-module"的模块，并使用 npm link

I've created a module called "my-module" with this shared code and linked it to "my-project" using npm link

问题是，当我启动项目时，"my-module"中的代码没有被转录，并在import语句上抛出了错误.

The problem is that when I start the project, the code from "my-module" is not beening tranpiled and throws an error right at the import statement.

我的模块内部的代码将被大量编辑.如何使它起作用?

The code inside my-module will be edited a lot. How to make it works?

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"]
}

推荐答案

链接的项目将找不到您的 .babelrc 文件.您有几种选择:

The linked project will not find your .babelrc file. You have a few options:

1. 在 my-project 或更高级别的目录中放置 .babelrc .但这需要将babel插件安装在该模块中(或全局安装)
2. 如果您使用的是构建工具(例如webpack，browserify等)，则可以在其中声明babel配置.

1. Place a .babelrc in my-project or a higher level directory. This will require the babel plugins to be installed in that module though (or globally)
2. If you're using a build tool (i.e. webpack, browserify, etc.) you can declare the babel config there.

此评论帮助我: https://github.com/babel/gulp-babel/issues/93#issuecomment-249172581

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

My project uses browserify, so declaring the same plugins in the build script that are in .babelrc and invoking require.resolve caused the npm linked project to be transpiled correctly.

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

这篇关于如何使使用"npm link"链接的babel可移植模块链接到服务器.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！