11月16, 2016

webpack指定node_modules某个模块babel

前阵子碰到个问题,希望自己写的类库,能让别人通过

import {Modal} from "Dui";

这样来使用,但因为我的Modal模块是通过es6来书写代码的。

我们查看基本的webpack配置,它是这样的:

module: {
    loaders: [
        { test: /\.js$/, loader: "babel", exclude: /node_modules/ }
    ]
}

上面的代码加了之后,明显在node_modules下面的模块就无法使用了。在群友的帮助下,找到了一个解决的方案

{ test: /\.js$/, loader: "babel", exclude: /node_modules(?!\/Dui)/ },

但其实这个方案并不完美,如果node_modules下有多个文件夹需要es6 babel的话,就会导致路径比较长,所以建议:

  include: [
    path.resolve(__dirname, "src"),
    path.resolve(__dirname, "node_modules/ui")
  ]

不使用exclude。

另外在写类库的时候,之前的入口index.js是这样的写的:

import Modal from "./component/modal";

import Animate from "./component/animate";

import Tip from "./component/tip";

import Selectpicker from "./component/select.js";

window["Dui"] = module.exports = {
    Modal,
    Animate,
    Tip,
    Selectpicker
}

这样难免很挫,翻了一下RegularUI的写法,它的webpack是这样配置的:

module.exports = {
    output: {
        filename: "regular-ui.js",
        library: "RGUI",
        libraryTarget: "umd"
    }
}

也就是说其实上面的window["Dui"]是可以去掉的,我只需要在webpack下进行配置就行了:

module.exports = {
    entry: "./src/js/dui.js",
    output: {
        path: "./dist/js", // 输出文件的保存路径
        filename: "dui.js", // 输出文件的名称
        library: "Dui",
        libraryTarget: "umd"
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ["babel?presets[]=es2015"],
            exclude: /node_modules/
        }]
    }
}

本文链接:www.my-fe.pub/post/how-to-let-module-use-babel.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。