Riot.js 与 Webpack的集成

为了让 Webpack 支持 Riot.js 的 tag 格式文件,我们可以借助 riotjs-loader 这个被加入 Webpack loader list 的 loader ,同时,需要 babel 做代码编译(使用 jsx-loader 也可以,这取决于开发代码的模式),所以我们需要安装这些模块:

npm i riot riotjs-loader babel babel-core babel-loader --save-dev

安装完成后就可以配置 webpack.config.js 了:

    module:{
        //我们需要预载入riotjs-loader并配置它:
        preLoaders:[
            {test:/\.tag$/, loader:'riotjs?type=none'}
        ],
        //接着为tag文件指定loader:
        loaders:[
            {test:/\.tag$/,loader:'babel'}
        ]
    },
    plugins:[
        //用ProvidePlugin预置riot库,这样就不用再在每个页面中引入库文件了,webpack会将库文件一并打包进主文件中:
        new webpack.ProvidePlugin({
            riot: 'riot'
        })
    ]

接下来,我们只需要把 *.tag 文件以模块加载的方式引入到入口文件或者相应页面的脚本中:

require('../components/demo.tag');

就可以让 webpack 为 riot.js 干活了。

你可能感兴趣的:(Riot.js 与 Webpack的集成)