json React.js + Bootstrap.scss + Webpack配置文件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json React.js + Bootstrap.scss + Webpack配置文件相关的知识,希望对你有一定的参考价值。
language: node_js
node_js:
- '0.10'
install: npm run dev_install
env:
global:
secure: CODECLIMATE_TOKEN
# React.js + Bootstrap.scss + Webpack configuration files
## Tracking Repos
* https://github.com/tomchentw/react-google-maps
* https://github.com/tomchentw/react-toastr
* https://github.com/tomchentw/react-prism
{
"__template__gist": "https://gist.github.com/tomchentw/368a93bb748ad9d576f1#file-bower-json",
"name": "PLACEHOLDER__NAME",
"main": "lib/index.js",
"version": "0.1.0",
"homepage": "https://github.com/tomchentw/PLACEHOLDER__NAME",
"author": {
"name": "tomchentw",
"email": "developer@tomchentw.com",
"url": "https://github.com/tomchentw"
},
"description": "PLACEHOLDER__DESCRIPTION",
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"webpack.config.js"
],
"devDependencies": {
"bootstrap-sass-official": "~3.2.0",
"github-fork-ribbon-css": "~0.1.1",
"prism": "3e9491d33bb2e8b959f0cd97ebad927285885158",
}
}
"use strict";
/**
* __template__gist__: https://gist.github.com/tomchentw/368a93bb748ad9d576f1#file-webpack-config-js
*/
var Path = require("path"),
webpack = require("webpack"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
webpackConfig,
IS_PRODUCTION = "production" === process.env.NODE_ENV,
JSX_WITH_HOT_LOEADERS = ["react-hot-loader", "jsx-loader?harmony"],
CSS_LOADER = "style-loader!css-loader?root=../",
SCSS_LOADER = CSS_LOADER + "!sass-loader?" + JSON.stringify({
includePaths: [
Path.resolve(__dirname, "../bower_components/bootstrap-sass-official/assets/stylesheets"),
]
});
webpackConfig = module.exports = {
entry: "./client/scripts/index.js",
output: {
path: Path.resolve(__dirname, "../public/assets"),
publicPath: "assets/",
filename: (IS_PRODUCTION ? "[hash].js" : "bundle.js")
},
resolve: {
root: [
Path.join(__dirname, "../bower_components")
]
},
module: {
loaders: [
{ test: require.resolve("react/addons"), loader: "expose-loader?React" },
{ test: /\.js(x?)$/, loaders: JSX_WITH_HOT_LOEADERS },
{ test: /\.jpg$/, loader: "file-loader" },
{ test: /\.css$/, loader: CSS_LOADER },
{ test: /\.scss$/, loader: SCSS_LOADER },
]
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
}),
new HtmlWebpackPlugin({
template: "./client/index.html",
filename: "../index.html"
})
]
};
if (IS_PRODUCTION) {
webpackConfig.plugins.push(
new webpack.optimize.DedupePlugin()
);
}
{
"__template__gist__": "https://gist.github.com/tomchentw/368a93bb748ad9d576f1#file-package-json",
"name": "PLACEHOLDER__NAME",
"version": "1.0.0",
"description": "PLACEHOLDER__DESCRIPTION",
"main": "lib/index.js",
"scripts": {
"build": "jsx --harmony ./src ./lib",
"build_client": "webpack -p --config ./client/webpack.config.js",
"test": "jest",
"dev_install": "npm install && npm dedupe && bower install",
"dev": "webpack --config ./client/webpack.config.js && webpack-dev-server --config ./client/webpack.config.js --inline --hot --content-base ./public"
},
"repository": {
"type": "git",
"url": "https://github.com/tomchentw/PLACEHOLDER__NAME"
},
"keywords": [
"React.js",
"React",
"react-component"
],
"author": {
"name": "tomchentw",
"email": "developer@tomchentw.com",
"url": "https://github.com/tomchentw"
},
"license": {
"type": "MIT",
"url": "http://tomchentw.mit-license.org"
},
"bugs": {
"url": "https://github.com/tomchentw/PLACEHOLDER__NAME/issues"
},
"homepage": "https://github.com/tomchentw/PLACEHOLDER__NAME",
"devDependencies": {
"bower": "^1.3.9",
"css-loader": "^0.9.0",
"expose-loader": "^0.5.3",
"file-loader": "^0.8.1",
"html-webpack-plugin": "^1.1.0",
"jest-cli": "^0.1.18",
"jquery": "^2.1.1",
"jsx-loader": "^0.12.1",
"raw-loader": "^0.5.1",
"react-hot-loader": "^0.5.0",
"react-tools": "^0.12.0",
"sass-loader": "^0.3.0",
"style-loader": "^0.8.1",
"tomchentw-npm-dev": "^1.1.0",
"webpack": "^1.4.7",
"webpack-dev-server": "^1.6.5"
},
"dependencies": {
"react": "^0.12.0"
},
"jest": {
"scriptPreprocessor": "<rootDir>/test/__preprocessor__.js",
"testPathDirs": [
"<rootDir>/src"
],
"testPathIgnorePatterns": [
"/node_modules/",
"<rootDir>/node_modules/"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react"
]
}
}
以上是关于json React.js + Bootstrap.scss + Webpack配置文件的主要内容,如果未能解决你的问题,请参考以下文章
基于 React.js + Redux + Bootstrap 的 Ruby China 示例
单击按钮后,Bootstrap5 模态未在 React.js 中显示
将 html bootstrap 转换为 react.js jsx 样式后更改 css 样式
如何把一整堂课放在右边? / 如何在课堂上添加填充? - 困惑(React.js - Bootstrap)
如何让 React.js 和 Bootstrap 4 模态轮播始终在打开时显示第一张图像
在 React JS 中使用淡入淡出时,Bootstrap 4.0.0-beta.3 模态不可见