【问题标题】:What Babelify presets/plugins am I missing to parse this code?我缺少哪些 Babelify 预设/插件来解析此代码?
【发布时间】:2017-06-22 11:34:50
【问题描述】:

我正在使用实现Browserify-Rails 的Rails 4.0 项目来实现Babelify

在我的本地和远程 Beta 服务器上,一切似乎都变得很糟糕。但是当我部署到生产环境时,如果某些文件中有 require("") ,则会跳过它们。

我原来的设置是这样的:

config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2015 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]"]

这使它跳过了包含此行的文件:

var { configureStore } = require('./configureStore');

这里需要铅:

let { createStore, combineReducers, applyMiddleware, compose } = require('redux');
let thunk = require('redux-thunk').default
let session = require('./reducers/session').default;
let search = require('./reducers/search').default;

const configureStore = () => {
  const reducers = combineReducers({
    session,
    search,
  });

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  return createStore(
    reducers,
    composeEnhancers(applyMiddleware(thunk))
  );
}

export { configureStore };

我猜也许我在这里使用了几个 ES2015 以上的 JS 样式

所以我继续使用配置,添加增量,并更新到 ES2017。这让我通过了那个破碎的文件。我的新配置如下所示:

config.browserify_rails.use_browserifyinc = true
config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2017 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]", "-t coffeeify --extension=\".js.coffee\""]

但这让我在另一个文件中达到这一行:

let { search } = require('../../actions/search');

加载这个(请注意,以下文件已被解析和翻译得很好):

export const SEARCH_RESULTS_RECEIVED = 'SEARCH_RESULTS_RECEIVED';

export const search = (term, token) => {
  return (dispatch) => {
    if (term && term.trim() !== '') {
      return _search(term, token).then((results) => dispatch(resultsReceived(results)));
    } else {
      return dispatch(resultsReceived([]));
    }
  }
};

const _search = (term, token) => {
  let promise = new Promise((resolve, reject) => {
    fetch(encodeURI(`/api/search?search=${term}`), {
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Token ${token}`
      }
    })
    .then(response => response.json())
    .then(function(response) {
      return resolve(response.results);
    })
    .catch((error) => {
      return reject(error);
    });
  });

  return promise;
};

export const resultsReceived = (searchResults) => ({
  type: SEARCH_RESULTS_RECEIVED,
  searchResults
});

我很好奇是否有任何我可能缺少的 Babelify 插件/预设来完成这项工作。

【问题讨论】:

    标签: javascript ruby-on-rails ecmascript-6 browserify babelify


    【解决方案1】:

    年度预设仅包含当年添加的功能 - 即 es2017 不包括来自 es2015es2016 预设的任何内容!

    这组预设应该可以解决你的问题:

    es2015 es2016 es2017 react stage-0
    

    也就是说,包含所有最新的年度预设的首选方法是使用env preset,它会拉入所有预设,将在 ES2018 发布后更新,并且还允许您根据目标环境进行配置如果你愿意:

    env react stage-0
    

    【讨论】:

    • 哟!!!非常感谢乔!老实说,我在任何地方都找不到这个答案。谢谢!
    • @Trip:很高兴我能帮上忙,我想很多人对此感到困惑!为了将来参考,所有官方预设都记录在here
    猜你喜欢
    • 1970-01-01
    • 2022-10-12
    • 2020-10-22
    • 2013-07-27
    • 1970-01-01
    • 2016-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多