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 模态不可见