巴贝尔转换路径JSX

我使用通天transpile一些ES2015代码ES5，像这样JS：巴贝尔转换路径JSX

"scripts": { 
    "build:lib": "babel src --out-dir lib --presets=react,es2015,stage-0", 
    "clean": "rimraf lib dist coverage", 
    "prepublish": "npm run clean && npm run build:lib" 
}

据其转换罚款ES5。问题在于，babel并没有改变文件之间的路径。它将文件的扩展名从.jsx更改为.js，但在文件内部，它仍将该文件引用为.jsx。

为了简化它，文件夹结构如下所示。巴贝尔已经改变了.jsx文件的扩展名：

- index.js 
- Component.js

虽然里面index.js，也算保持.jsx扩展：

require('./Component.jsx');

我这么想吗？有一个更好的方法吗？感谢您的帮助:)

来源

2016-11-08 Alberto Centelles

为什么不简单地使用Webpack呢？这是有原因的吗？特别是你也缺少设置node_env生产，所以它会避免添加proptyyping等

es3ify只是用于更改代码，而你正试图建立一个库。你需要像Webpack这样的树木构建器来获得类似的东西（es3ify如何知道彼此之间的引用？）

所以tl; dr有一个更好的解决方案：使用Webpack。

module.exports = { 
    devtool: 'source-map', 

    entry: [ 
    path.join(__dirname, '/src/index.jsx') 
    ], 

    output: { 
    path: path.join(__dirname, '/dist'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV) 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
    ] 
};

来源

2016-11-08 14:11:32 Shiroo

Webpack增加了很多我不需要的东西。我发现它是有用的，但在这种情况下，我只是想要相同的文件夹结构，但在ES5中，我得到它很好，与上面提到的问题。你将如何在Webpack中做到这一点？ –

你可以自己决定你想在那边做些什么。我可以告诉你，你可以做同样的事情，就像你在Webpack中所做的那样。我将编辑答案并发布webpack配置示例 – Shiroo

Ofcourse它将创建一个包而不仅仅是已翻译的文件。尽管webpack还为您提供了额外的adhoc posibilites，例如COmpressionPlugin或Deduping，或者甚至更好的树抖动元素（如果您没有使用stage-0 ofcourse，但单手选择插件以避免转换为CommonJS）。 – Shiroo

正如Shiroo建议的那样，我最终为此使用了webpack。这里的关键概念是理解解析器的作用。尽管明确有它加载内https://webpack.github.io/docs/resolving.html

resolve: { 
    root: path.resolve('./src'), 
    extensions: ['', '.js', '.jsx'] 
    }

后来，我遇到了所有的node_modules也包括在捆绑，：

module: { 
    loaders: [ 
     { 
     test: /(\.jsx|\.js)$/, 
     include: path.resolve('./src'), 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }

这个问题，他们是真正在的WebPack文档很好地解释这里有更好的解释https://stackoverflow.com/a/35820388/4929834

来源

2016-11-09 07:55:20

巴贝尔转换路径JSX

回答

相关问题