我正在开发一个名为foobar
的本地npm包,允许我实时进行更改或修改,而无需发布/取消发布以改善开发时间和理智。
在projectTest
,我通过使用命令foobar
链接npm link foobar
。如果你不知道,npm链接标志会为你的全局变量创建一个符号链接(你可以在这里阅读更多相关信息:https://docs.npmjs.com/cli/link)
projectTest
恰好是一个Reactjs项目,用ES2015,Webpack,babel等编写;我从'package'导入{x},没有任何问题,等等。
如前所述,node_modules中存在的包foobar
有一个指向其开发目录的链接,但出于某种原因,当我尝试导入时:
import { myFn } from 'foobar'
控制台中抛出以下错误:
/foobar/lib/index.js:3
export const loadImage = () => {
^^^^^^
SyntaxError: Unexpected token export
at Object.exports.runInThisContext (vm.js:78:16)
at Module._compile (module.js:543:28)
这是不可取的,因为其他进口工作完美无缺;为什么在代码也是ES2015的其他现有导入中不会发生这种情况?它没有被提前或转换为静态文件,而是实时AFAIK,因为我有使用babel加载器的webpack设置,如:
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, 'src'),
entry: [
'react-hot-loader/patch',
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'babel-polyfill',
'./js/index.js'
],
output: {
path: __dirname,
publicPath: '/assets/',
filename: 'js/bundle.js?[hash]'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
}
...
}
我想了解发生这种情况的原因!因此,为了帮助我跟踪问题,请尝试导入不是node_module的链接包,而是导入完整路径或相对路径,例如:
import { myFn } from '/bar/zoo/lar/deep/foobar'
我已经放置了一个等效的语法/文件,一个工作导入,我的utils或帮助函数,我在整个项目中使用没有问题。语法是:
export const myFn = () => {
return 'myFn call!'
}
从我的app.js
导入的地方让我们说,像:
import { myFn } from './utils' // works fine! BUT if I DO:
import { myFn } from '/path/to/packageFoobar' // I get the syntax error!
SO user @felixKling留下了关于webpack node_module被忽略的好评,我现在已经测试但是在删除node_module之后我仍然得到错误:
(function (exports, require, module, __filename, __dirname) { export const styleObjectParser = str => {
^^^^^^
SyntaxError: Unexpected token export
at Object.exports.runInThisContext (vm.js:78:16)
at Module._compile (module.js:543:28)
从我可以看到的是,在webpack开发配置文件中,在运行时只有context
下的代码是transpiled
。但我可能错了:
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, 'src'),
entry: [
'react-hot-loader/patch',
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'babel-polyfill',
'./js/index.js'
],
我想确认改变语法非常好,所以这与babel-loader运行的上下文有关。即使我不理解为什么语法错误发生,即使删除了node_module排除。
module.exports = {
myFn: function () {
console.log('Syntax correct! myFn works!')
}
}
任何建议表示赞赏!
谢谢!
我认为问题是当与npm链接链接时foobar项目没有被转换,但是projectTest不应该编译foobar项目,它应该只是链接它。在将其链接到其他项目之前,您必须使用babel来转换foobar。您可以在foobar项目的package.json中添加构建脚本以将代码转换为/ dist文件夹,并以这种方式修改package.json的主要字段:
"main": "./dist/index.js"
在开发过程中添加npm run build
,以便在开发foobar时更新dist文件夹。现在projectTest应链接foobar的转换版本。