babel 将es6编译成es6和es5

项目中遇到了个问题,就是我们的utils项目是独立的项目然后发布到公司内部的npm仓库,我们的代码都是用typescript写的,然后在其他项目yarn add xxx 这样就被添加到了node_modules目录下面

 "build": "rm -rf lib && rm -rf es6 && rm -rf typings && tsc -p ./ --outDir es6/ -d --declarationDir typings/ && babel es6 --out-dir lib",

这么的话生成三个目录typings es6 lib 三个目录,但是debug的时候发现Chrome Sources面板下面只有编译成es5的lib目录,该项目使用了redux-saga就有了yield关键字,编译成es5后就是一堆switch case看起来很不方便,要是能在Chrome sources面板直接调试typescript或者es6代码就方便多了,查了下有人说是在tsconfig.json或者webpack配置下 "sourceMap": true,我下载该项目加上source map,然后拷贝到node_modules下面,但没有执行,报错

webpack2 终极优化这篇文章提到了redux编译的时候有require和import模式

package.json

    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",

.bablerc

{
  "plugins": [
    ["transform-es2015-template-literals", { "loose": true }],
    "transform-es2015-literals",
    "transform-es2015-function-name",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoped-functions",
    ["transform-es2015-classes", { "loose": true }],
    "transform-es2015-object-super",
    "transform-es2015-shorthand-properties",
    ["transform-es2015-computed-properties", { "loose": true }],
    ["transform-es2015-for-of", { "loose": true }],
    "transform-es2015-sticky-regex",
    "transform-es2015-unicode-regex",
    "check-es2015-constants",
    ["transform-es2015-spread", { "loose": true }],
    "transform-es2015-parameters",
    ["transform-es2015-destructuring", { "loose": true }],
    "transform-es2015-block-scoping",
    "transform-object-rest-spread",
    "transform-es3-member-expression-literals",
    "transform-es3-property-literals"
  ],
  "env": {
    "commonjs": {
      "plugins": [
        ["transform-es2015-modules-commonjs", { "loose": true }]
      ]
    },
    "es": {
      "plugins": [
        "./build/use-lodash-es"
      ]
    }
  }
}

use-lodash-es.js

module.exports = function () {//这边的代码不理解,这么写就可以是import的方式引入模块了吗
  return {
    visitor: {
      ImportDeclaration(path) {
        const source = path.node.source
        source.value = source.value.replace(/^lodash($|\/)/, 'lodash-es$1')
      }
    }
  }
}

webpack2 终极优化

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本,它有很...
    奋斗的小废鱼阅读 4,104评论 0 16
  • 前言 WebPack 是什么? WebPack 是什么,WebPack 可以看做是模块打包机:它做的事情是,分析你...
    Promise__阅读 4,882评论 3 12
  • 我们说的Linux其实指的就是 内核(kernel)而已。这个内核控制你主机的所有硬件并提供系统所有的功能,所以它...
    Zhang21阅读 12,189评论 0 18
  • 原文地址:Getting started with TypeScript and React 原文作者:Jack_...
    沪江技术学院阅读 20,004评论 4 34
  • 郭相麟 一个生活在无声世界的美丽女孩,行走在人生的风雨中! 善良孝顺是她做人的本分,为了让含莘茹苦的妈妈过上衣...
    郭相麟阅读 1,950评论 0 0

友情链接更多精彩内容